使用Ajax和PHP更改下拉列表值

可能重复：

我有4个下拉列表元素，它们应该相互结合，这是关于目的地的。第一个下拉列表应包含所有目的地，然后根据用户选择的第二个下拉列表，其中包含可用于所选城市的值（目的地），其他两个下拉列表将具有与该目的地相反的方式。它类似于此网站中的表单： （您可以看到左侧的示例，其中有一个bookig表单）。我需要ajax脚本来完成这项工作。我将负责PHP任务

<div class="WraperForForm"> 
<form action="index.php?menu=rezervimet&submenu=rezervo" method="post">

<table  cellspacing="5" cellpadding="0" border="0" >
<tr>
    <td width="100">
        Emri:
    </td>
    <td width="190">
        <input type="text" id="emri" name="emri">
    </td>

    <td width="100">
        Mbiemri:
    </td>
    <td width="190">
        <input type="text" id="mbiemri" name="mbiemri">
    </td>
</tr>
</table>

<table width="300" cellspacing="5" cellpadding="0" border="0" style="float:left;">
<tr>
    <td width="100">
        Prej:
    </td>
    <td>
        <select class="selectDest" name="Prej">
            '.funksionet::directions(1).'
        </select>
    </td>

</tr>
<tr>
    <td width="80">
        Deri:
    </td>
    <td>
        <select class="selectDest" name="Deri">
            '.funksionet::directions(2).'
        </select>
    </td>
</tr>
<tr>
    <td>

            <form name="Data1Drejtim">
            <label for="data1drejtim">Data e nisjes:</label>
    </td>
        <td>
            <input type="text" id="data1drejtim" name="data1drejtim">
            <script language="JavaScript">


    // whole calendar template can be redefined per individual calendar
    var A_CALTPL = {
        \'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
        \'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
        \'yearscroll\': true,
        \'weekstart\': 0,
        \'centyear\'  : 70,
        \'imgpath\' : \'images/\'
    }

    new tcal ({
        // if referenced by ID then form name is not required
        \'controlname\': \'data1drejtim\'
    }, A_CALTPL);
    </script>

    </td>

    </tr>
</table>

<!-- ___________________Return table_____________________________________ -->
<table width="300" cellspacing="5" cellpadding="0" border="0" style="float:left;" id="hideThis" >
<tr>
    <td width="100">
        Prej:
    </td>
    <td>
        <select class="selectDest" name="KthyesePrej" >
                '.funksionet::directions(2).'
        </select>
    </td>
</tr>
<tr>
    <td width="40">
        Deri:
    </td>
    <td>
        <select class="selectDest" name="KthyeseDeri">
            '.funksionet::directions(1).'
        </select>
    </td>

<tr>
    <td>
        <label for="dataKthyese">Data kthyese:</label>
    </td>       

    <td>

            <input type="text" id="dataKthyese" name="dataKthyese">
                <script language="JavaScript">


    // whole calendar template can be redefined per individual calendar
    var A_CALTPL = {
        \'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
        \'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
        \'yearscroll\': true,
        \'weekstart\': 0,
        \'centyear\'  : 70,
        \'imgpath\' : \'images/\'
    }

    new tcal ({
        // if referenced by ID then form name is not required
        \'controlname\': \'dataKthyese\'
    }, A_CALTPL);
    </script>
            </form>
        </td>

</tr>
</table>

<table width="585" cellspacing="0" cellpadding="3" border="0 " style="float:left;">
<tr>
    <td >Persona:</td>
    <td>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
</tr>
<tr>
    <td width="100">
        <input type="radio" id="1drejtim" name="drejtimi"  value="një drejtim" onclick="toggleVisibility(\'hideThis\',0)">
        <label for="1drejtim">Një drejtim</label>
    </td>

    <td >
        <input type="radio" id="kthyese" name="drejtimi" checked="checked" value="kthyese"  onclick="toggleVisibility(\'hideThis\',1)">
        <label for="1drejtim">Kthyese</label>
    </td>

    <td>
    <input style="float:right;" type="submit" value="Rezervo" name="rezervo" />
    </td>
</tr>
</table>
</form><!-- end of the reservation form-->
</div>

Emri：
姆比姆里：
Prej：
“.funksionet:：方向（1）。”
德里：
“.funksionet:：方向（2）。”
数据e nisjes：
//可以为每个日历重新定义整个日历模板
var A_CALTPL={
\‘月份’：[‘Janar’、‘Shkurt’、‘Mars’、‘Prill’、‘Maj’、‘Qershor’、‘Korrik’、‘Gusht’、‘Shtator’、‘Tetor’、‘Intor’、‘Dhjetor’]，
\‘工作日’：[‘地’、‘他’、‘马’、‘我’、‘Ej’、‘Pr’、‘Sh’]，
\“年鉴”：对，
\“weekstart\”：0，
\‘百分之七十’，
\“imgpath\”：\'images/\'
}
新tcal({
//如果由ID引用，则不需要表单名称
\“controlname\”：\“data1drejtim\”
}，A_CALTPL）；
Prej：
“.funksionet:：方向（2）。”
德里：
“.funksionet:：方向（1）。”
数据格式：
//可以为每个日历重新定义整个日历模板
var A_CALTPL={
\‘月份’：[‘Janar’、‘Shkurt’、‘Mars’、‘Prill’、‘Maj’、‘Qershor’、‘Korrik’、‘Gusht’、‘Shtator’、‘Tetor’、‘Intor’、‘Dhjetor’]，
\‘工作日’：[‘地’、‘他’、‘马’、‘我’、‘Ej’、‘Pr’、‘Sh’]，
\“年鉴”：对，
\“weekstart\”：0，
\‘百分之七十’，
\“imgpath\”：\'images/\'
}
新tcal({
//如果由ID引用，则不需要表单名称
\“controlname\”：\'dataKthyese'
}，A_CALTPL）；
人物角色：
1.
2.
3.
Njëdrejtim
克提耶斯

这是代码的一部分，当我开始使用它时，我忘记了人们可以从附近的城市或从国外进行预订，所以我只对国内城市进行了from下拉列表，而对国外城市进行了to下拉列表。无论如何，我需要所有这些与ajax，因为我不擅长与ajax

---

谢谢您的时间。

我本想通过参考一篇外包文章中引用的一些代码来提供帮助，但我决定只给您一个我认为您正在寻找的内容的直接链接。这里是：

我想通过参考一篇外包文章中引用的一些代码来提供帮助，但我决定只给您一个我认为您正在寻找的内容的直接链接。这里是：

如果使用jquery，最简单的方法是：

$('#dropdown1').change(function() {
    value = $('#dropdown1').val();
    $.get(ajax.php, { 'value': value }, function(data){
        $('#dropdown2').empty();
        $('#dropdown2').append(data);
    });
});

php返回的数据将是一个包含所有选项值的字符串，例如

$data = '<option value="1">option1</option><option value="2">option2</option><option value="3">option3</option>';
echo $data;

$data='option1option2option3'；
回波数据；

还可以使用getJSON返回选项值数组，并通过迭代返回的数据数组填充下拉菜单。不管哪个有效

总之，简单的例子。希望它能帮助你

---

编辑：为了澄清，ajax.php返回的$data字符串将根据您随请求发送的值创建。您可以使用$\u GET['value']在ajax.php中访问它。

如果您使用的是jquery，最简单的方法是：

$('#dropdown1').change(function() {
    value = $('#dropdown1').val();
    $.get(ajax.php, { 'value': value }, function(data){
        $('#dropdown2').empty();
        $('#dropdown2').append(data);
    });
});

php返回的数据将是一个包含所有选项值的字符串，例如

$data = '<option value="1">option1</option><option value="2">option2</option><option value="3">option3</option>';
echo $data;

$data='option1option2option3'；
回波数据；

还可以使用getJSON返回选项值数组，并通过迭代返回的数据数组填充下拉菜单。不管哪个有效

总之，简单的例子。希望它能帮助你

---

编辑：为了澄清，ajax.php返回的$data字符串将根据您随请求发送的值创建。您可以使用$_GET['value']在ajax.php中访问它。

如果您只是需要一些关于创建选择列表的ajax语法的帮助，这里是我刚才从我编写的库中获取的一些代码。我最近没有做太多JS，只是以防万一。（扔掉像syn.Debug这样的调用，因为这些调用是对我的库中的其他方法的调用，而您不会有这些调用）

//==============================================================================
//创建由序列号组成的选择元素
//@param numDesired-选择区域应具有的选项数
//==============================================================================
syn.CreateSelectSequential=函数（numDesired，startValue）
{
var_select=document.createElement（“select”）；
对于（变量i=0；i