あなたのやり方は問題ありませんが、すべての選択フィールドにオプション値をもたらすには、多くのajax呼び出しが必要になります。これは、JSONを使用して1回のajax呼び出しで実行できます。 PHPページで、4つの選択ボックスのオプションを表すHTML文字列を含む配列を作成できます。次に、json_encode()関数を使用してこの配列をJSON文字列に変換できます。
$arr=array("second"=>"<option>....</option>.......<option...</option>", //for second dropdown
"third"=>"<option>....</option>.......<option...</option>", //for third dropdown
"fourth"=>"<option>....</option>.......<option...</option>", //for fourth dropdown
"fifth"=>"<option>....</option>.......<option...</option>" //for fifth dropdown
);
echo json_encode($arr);
次に、Webページで、最初のドロップダウンとして、次のようなjQuery関数を記述できます。
function loadOptions(){
jQuery.ajax({
success: function(data){
jQuery("select#field_2").html(data["second"]);
jQuery("select#field_3").html(data["third"]);
jQuery("select#field_4").html(data["fourth"]);
jQuery("select#field_5").html(data["fifth"]);
}
});
}
このようにして、1回のajax呼び出しで他のすべてのドロップダウンのオプションをロードできます。他のドロップダウンにも同様の機能が必要であることを理解しています。他のドロップダウンにも同様の関数を書くことができます。これは一般化された関数で、ドロップダウン番号を渡すと、関数はターゲットのドロップダウンのオプションを返します。たとえば、ドロップダウン番号2を渡すと、関数はドロップダウン3、4、5のオプションを返します。3を渡すと、ドロップダウン4と5のオプションを返します。
function loadOptions(selectNo){
jQuery.ajax({
data:{"selectNo",selectNo},
success: function(data){
switch(selectNo){
case 1: jQuery("select#field_2").html(data["second"]);
case 2: jQuery("select#field_3").html(data["third"]);
case 3: jQuery("select#field_4").html(data["fourth"]);
case 4: jQuery("select#field_5").html(data["fifth"]);
}
}
});
}
PHPページで、この機能を実装するために以下のコードを書くことができます:
$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="<option>....</option>.......<option...</option>"; //for second dropdown
case 2: $arr["third"]="<option>....</option>.......<option...</option>"; //for third dropdown
case 3: $arr["fourth"]="<option>....</option>.......<option...</option>"; //for fourth dropdown
case 4: $arr["fifth"="<option>....</option>.......<option...</option>"; //for fifth dropdown
}
echo json_encode($arr);
JSONの詳細については、こちら をご覧ください。 。