あなたが定期的にJavaScriptで別のリストを設定することができアヤックスを使用したくない場合は、スクリプトタグ内のページがロードされ、その後、最初のドロップダウンの 'onchange'には、選択の内容を必要な既成グループのいずれかに切り替えることによって、2番目のドロップダウンの内容が変更されます。
基本的に、最初のドロップダウンが変更されたときに必要に応じてドロップダウンリストを再構築するjavascript関数の2番目のドロップダウンには、さまざまなオプションがあります。
これはjavascript、PHP、およびmysql(既に使用している)の組み合わせを必要とし、AjaxやjQueryをまったく必要としません。
たとえば、これを使用して、最初のselect文をonChangeで設定します。値は、それが関数に値を送信する(と私たちはgetElementByIdを使用できるように、同様にIDを設定することを忘れないでください)変更したときように:
<select name="courseName" id="courseName" onChange="setBranchList(this.value)" >
courseName select文に関する重要な注意事項 - 例で提供各オプションの '値'は空です。このソリューションが機能するように設定されていることが重要です。このように:
<option value="<?php echo $row['courseID']; ?>"><?php echo $row['courseName']; ?></option>
2番目のドロップダウンのための選択は、(IDを設定する必要がある)のようであり得る:
<select name="sDepartment" id="sDepartment">
次いで、いくつかのPHPを使用してこのようなJS機能を有するネスト内のwhileループ外側のループの最初のドロップダウンのすべての値を選択し、内側のループの2番目のドロップダウンの可能なすべての値に対するbuild文を作成します。
<script type="text/javascript">
function setBranchList(courseID)
{
var selector_to_fill = document.getElementById("sDepartment");
selector_to_fill.options.length = 0;
<?php
$course_query = "SELECT * FROM courses ORDER BY courseID";
$course_result = mysql_query($course_query);
while ($course_detail = mysql_fetch_array($course_result))
{ ?>
if (courseID == '<?php echo $course_detail['courseID']; ?>'){
<?php $list_count = 0;
$branch_query = "SELECT * FROM branch WHERE courseID = '$course_detail[courseID]' ORDER BY branchID";
$branch_result = mysql_query($branch_query);
while ($branch_detail = mysql_fetch_array($branch_result))
{ ?>
selector_to_fill.options[<?php echo $list_count; ?>]=new Option("<?php echo $branch_detail['branchName']; ?>", "<?php echo $branch_detail['branchID']; ?>", false, false);
<?php
$list_count++;
} ?>
}
<?php
} ?>
}
</script>
ユーザーが自分のページにアクセスすると、PHPはそう何ユーザーが得ることになりますいくつかのJavaScriptで、ユーザーに送信する前に、あなたのDBにどんなのに基づいてsetBranchList関数のIF文のシリーズを出し構築しますこのような:
if (courseID == '1'){
selector_to_fill.options[0]=new Option("Department You Study", "", false, false);
selector_to_fill.options[1]=new Option("Civil Engineering", "1", false, false);
selector_to_fill.options[2]=new Option("Computer Sci & Technology", "2", false, false);
selector_to_fill.options[3]=new Option("Electrical Engineering", "3", false, false);
}
if (courseID == '2'){
selector_to_fill.options[0]=new Option("Department You Study", "", false, false);
selector_to_fill.options[1]=new Option("E&TC", "4", false, false);
selector_to_fill.options[2]=new Option("Mechanical Engineering", "5", false, false);
}
if (courseID == '3'){
selector_to_fill.options[0]=new Option("Department You Study", "", false, false);
}
if (courseID == '4'){
selector_to_fill.options[0]=new Option("Department You Study", "", false, false);
}
if (courseID == '5'){
selector_to_fill.options[0]=new Option("Department You Study", "", false, false);
}
}
この例に関する注意:
'selector_to_fill.options.length = 0;'関数呼び出し時に2番目のリストからすべてのオプションをクリアする
リストはDOMを使用して'new Option'で作成されます。
selectステートメントの各オプションは0から始まるインデックスを必要とするため、php $ list_count変数が使用されます。この変数は各アイテムのインデックスを表し、インデックスが常に正しくインクリメントされるようにループごとにリセットされます。 P
は、いくつかのJavaScriptを使用:私はjQueryとAJAXについて学び、それはまだ動作を確認するために投稿する前にもう一度、このソリューションをテストする前に
は、私は長い時間前にこれを建てました。 –
あなたはAjaxを試す必要があります。 –
これは、Ajaxリクエストで行うことも、別のドロップダウンですべての値を取得し、JSを使用して特定のものだけを表示することもできます。 –