最初で最良の方法（オプション固有のデータが十分にある、またはある可能性がある場合）
AJAXを使用します。同じことを実装する他の方法と比較して、これが最も簡単な方法だと思います。 Jqueryを使用してAJAXを実装します。それはAJAXを簡単なものにします！ここで私はあなたのために私のケーキを共有します-
以下は、おおよそ必要な完全なコードです-
-
このように最初の選択でjavascript関数populateSecondDropdown（）を呼び出します-
echo "<select name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>"; // printing the list box select command echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box -
PopulateSecondDropdown（）関数内でajax呼び出しを定義します-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> function populateSecondDropdown(object,baseUrl) { $.ajax({ type: "POST", url: baseUrl+"/ajax/fetchOptions.php", data: { id_option: $(object).val(), operation: 'get_subjects' }, dataType: "json", success: function(data) { //Clear options corresponding to earlier option of first dropdown $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">Select Option</option>'); //Populate options of the second dropdown $.each( data.subjects, function() { $('select#secondDropdown').append('<option value="'+$(this).attr('option_id')+'">'+$(this).attr('option_name')+'</option>'); }); $('select#secondDropdown').focus(); }, beforeSend: function() { $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">Loading...</option>'); }, error: function() { $('select#secondDropdown').attr('disabled', true); $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">No Options</option>'); } }); } </script>-
そして最後に、AJAXプロセッサファイルfetchOptions.phpの2番目のドロップダウンのオプションをフェッチするためのクエリ。ここで$_POST['id_option']を使用して、その下のオプションをフェッチできます。ここでのデータベースクエリは、
option_idをフェッチする必要があります およびoption_nameすべてのオプションのフィールド（$.each内のjqueryコードで予想されるとおり） ）そして次のようなjsonエンコード配列を返します：-return json_encode(array("subjects" => $resultOfQuery));
-
2番目の方法（JavaScriptのみを使用）
-
最初のドロップダウンのフィールドでグループ化された2番目のドロップダウンのすべてのデータを取得します。例えば。最初のドロップダウンに表示されたコースと、2番目に表示されたコースの下の科目を受講しましょう
-
2番目のドロップダウンのすべてのオプションを作成します。次のようなオプションを作成しながら、コースと同じクラスを割り当てます。-
$querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course "; $procc = mysqli_prepare($link, $querycourse); $queryc = mysqli_query($link, $querycourse) or die(mysqli_error($link)); echo "<select name='subjects[]' value='' multiple='multiple' size=100>"; echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>"; } echo "</select>"; -
次に、
onchange="displaySubjectsUnderThisCourse(this);"を定義します 最初のドロップダウンでこのJavaScriptを記述します：-function displaySubjectsUnderThisCourse(object) { var selectedCourse = $(object).val(); //Display the options with class = the selected option from first dropdown $("."+selectedCourse).removeClass("hidden"); //define a class hidden with display:none; $('option:not(.selectedCourse)').hide(); // hide all options whose class is other than selectedCourse - Not sure whether this will work or not, though //Deselect any previous selections //If single option selection is allowed $('select#secondDropdown option').attr('selected', false); // or following if multiple selection is allowed (needed for IE) $('select#secondDropdown option').attr('selectedIndex', -1); }ここでの基本的な考え方は、オプショングループを非表示/表示することですが、私のコードにはエラーがある可能性があります。
-
最後に、2番目の方法（すべてのオプション値をフェッチする）は、データ量が限られており、将来的には常にデータが少なくなると確信している場合にのみ適していることに注意してください。ただし、将来については誰も確信が持てないため、常にAJAXメソッドを使用することをお勧めします。