使用 Ajax 和 PHP 更改下拉列表值 [重复]

Question

可能重复：
Populating dropdown - PHP Ajax MySQL

我有 4 个下拉列表元素，它们应该相互组合，即关于目的地。第一个应该具有所有目的地，然后根据用户选择的第二个下拉列表具有可用于所选城市的值（目的地），然后其他 2 个下拉列表将具有与该目的地相反的方式。它类似于此网站中的表格： http://info.airprishtina.com/content/index.php?id=20&no_cache=1&L=0（您可以看到左侧的示例有一个 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>

这是代码的一部分，当我开始它时，我忘记了人们可以从他们附近的城市或国外进行预订，所以我只在国内城市做了 FROM 下拉列表，在国外做了 TO 下拉列表城市。无论如何，我需要 ajax 这一切，因为我一点也不擅长 ajax！

感谢您的宝贵时间。

Answer 1

我正打算通过引用从外包文章中引用的一些代码来提供帮助，但我决定只为您提供我认为您正在寻找的内容的直接链接。这里是：populating triple dropdown list

Answer 2

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

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

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

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

您还可以使用 getJSON 返回一个选项值数组，并通过遍历返回的数据数组来填充下拉菜单。无论哪个有效。

无论如何，简化示例。希望对您有所帮助！

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

Answer 3

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

//==============================================================================
// Create a Select element that is composed of sequential numbers
// @param numDesired - the number of options the select area should have
//==============================================================================
syn.CreateSelectSequential = function(numDesired, startValue)
{
var the_select = document.createElement("select");
for(var i=0 ; i < numDesired; ++i)
{
    var the_option = new Option(i+startValue, i+startValue); //display , value both set to i
    the_select.options[i]=the_option;
}   
return the_select;
}; 



//==============================================================================
// Creates an XHTML <select> element  from the passed array of properties, 
// @param optionList an array of value and display properties 
// @returns a fully valid select element from the DOM
//==============================================================================
syn.CreateSelect = function(optionList)
{
try
{
    var the_select = document.createElement("select");
    for (var i = 0 ; i< optionList.length; ++i)
    {      
        var the_option = new Option(optionList[i].display, optionList[i].value);
        //if (i == 3) the_option.disabled = true;
        the_select.options[i]=the_option;

        //The following method worked for FireFox but not for IE    
        //        var the_option = document.createElement("option");
        //         the_option.value = optionList[i].value;
        //         the_option.text = optionList[i].display;
        //         the_select.appendChild(the_option);
    }
    return the_select;
}
catch (exception)
{
    syn.Debug("syn.CreateSelect: "+exception.message);
}
};