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>

这是代码的一部分，当我开始它时，我忘记了人们可以从他们附近的城市或国外的城市预订，所以我只用国内城市和TO下拉列表与外国人做了FROM下拉列表城市。无论如何，我需要所有这些与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);
}
};

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

3 个答案: