最初の選択に基づいて2番目の動的ドロップダウンを設定するAjaxのアプローチ

Question

以前はあまり使用していませんでしたが、これは簡単です。私はパズルに別々の部分を持っていますが、一緒に置く方法はわかりません。

両方ドロップダウン最初は、次のコードを使用して移入され、データベースから移入され：

<?php 
$sql = "SELECT title, nid FROM node where type= 'hotel'"; 
$hotels = mysql_query($sql); 
?> 
<select name="hotels" id="hotels"> 
<?php 
while($row = mysql_fetch_array($hotels)) 
{ 
    echo "<option value=\"".$row['nid']."\">".$row['title']."\n "; 
} 
?> 
</select> 

2番目のドロップダウンは、上記選択された値に基づいて移入されるべきです。だから、基本的には、選択した項目のIDを取得し、その項目をクエリで使用して2番目のドロップダウンを設定します。

私はSQLクエリのために、以下のではなく、上記のコードを使用します。Xは、最初のドロップダウン上のselectedIndexのIDです

SELECT title, nid from node where type = 'season' AND hotel_nid = X 

。

コードは機能することはありますが、私はどのように2つを組み合わせるか分かりません。 Javascriptを使用して、 "seasons"というdivのInnerHTMLを変更し、ドロップダウンを取得して表示するコードを印刷することができます。

しかし、両方のドロップダウンを表示することができますが、最初の表示が完了するまで2番目の表示は無効になっています。

Answer 1

ユーザが最初のドロップダウンの値を変更したときに、2番目のリストをポピュレートするPHPスクリプトをAjax経由で呼び出す必要があります。したがって、onchange = "myFunctionToPopulate（this.value）;"を追加する必要があります。最初のドロップダウンに移動します。

これを行う方法がわからない場合は、jQueryなどのJSライブラリも使用することをお勧めします。これを実現するための簡単なコードを投稿します。 jQueryを使って

編集

は、あなたがこのような何かを行うことができます。your_script.phpは全体のselectタグを返します

<select name="first_dropdown" onchange="$('#dropdown2_container').load('your_script.php?nid='+this.value);"> 
    <option.... 
</select> 
... 
<div id="dropdown2_container" style="display:none"> </div> 

。

Answer 2

あなたの代わりに<div>のご<select>ボックスのinnerHTMLを埋める使用することができますが、私は本当にjQueryのを見て持っているあなたに助言する：http://api.jquery.com/category/ajax/を。それはすべてをより簡単にします。