更改下拉列表值

Question

可能重复：
Populating dropdown - PHP Ajax MySQL

我有4组下拉列表中的元素，他们应该互相结合，其对目的地。第一个应该有所有的目的地，然后根据用户选择的第二个下拉列表具有可用于所选城市的值（目的地），然后另外两个下拉列表将具有与该目的地相反的路。它的东西就像这个网站上的表格： 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与外国城市的下拉列表。无论如何，我需要所有这一切与阿贾克斯，因为我不善于与阿贾克斯！

谢谢你的时间。

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返回$数据串会根据您的要求发送的值来创建。您可以使用$ _GET ['value']在ajax.php中访问它。

Answer 3

如果您只是需要一些帮助与阿贾克斯语法这里创建选择列表中的一些代码我只是抓住了我写了前段时间库。我最近没有做过很多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); 
} 
};