変更するドロップダウンリストの値は、

Question

可能性の重複：
Populating dropdown - PHP Ajax MySQL

は私が4つのドロップダウンリストの要素を持っているし、彼らは、お互いにその程度先を組み合わせる必要があります。最初の1つはすべての宛先を持つ必要があり、次にユーザーが選択した都市で使用可能な値（宛先）を持つ2番目のドロップダウンリストを選択すると、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外国の都市とのドロップダウンリスト。とにかく私はAJAXでこれがすべて必要です。なぜなら、私はAJAXでうまくいかないからです！

ありがとうございます。

Answer 1

私は、アウトソーシングされた記事から引用したコードを参照して助けようとしていましたが、あなたが探していると思うものへの直接リンクを与えることに決めました。ここにある：populating triple dropdown list

Answer 2

あなたはjqueryのを使用している場合は、これを実行する最も簡単な方法は、次のようになります。すべてのオプション値を含む文字列、例えばなり戻りをajax.php

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

とデータを。

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

また、getJSONを使用してオプション値の配列を返し、返されたデータ配列を反復してドロップダウンメニューを作成することもできます。いずれにしても動作します。

とにかく、簡略化された例です。うまくいけばそれはあなたを助けます！

EDIT：明確にするために、ajax.phpが返す$データ文字列は、リクエストで送信した値に基づいて作成されます。 $ _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); 
} 
};