更改下拉列表值

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); 
} 
};