私は3つの選択ボックスを持っています。最初の選択ボックスを選択すると、jQuery と AJAX (データベースからの値) を使用して、2 番目と 3 番目の選択ボックスのオプションが自動的に読み込まれます。
しかし、2 番目の選択ボックスのオプションを変更すると、2 番目の選択ボックス オプションに基づいて 3 番目の選択ボックスの値が表示されます。
$(document).ready(function()
{
$("#cat").change(function()
{
var pc_id = $(this).val();
if(pc_id != '')
{
$.ajax
({
type: "POST",
url: "load_sub_cats.php",
data: "catid="+ pc_id,
success: function(option)
{
$("#subcat").html(option);
}
});
}
else
{
$("#subcat").html("<option value=''>-- No category selected --</option>");
}
if(pc_id != '')
{
$.ajax
({
type: "POST",
url: "load_qset.php",
data: "catid="+ pc_id,
success: function(option)
{
$("#questionset").html(option);
}
});
}
else
{
$("#questionset").html("<option value=''>-- No question set selected--</option>");
}
return false;
});
$("#subcat").change(function()
{
var pc_id = $(this).val();
//$("#questionset").html("<option value=''>-- Select Question set --</option>");
$("#questionset").empty();
if(pc_id != '')
{
$.ajax
({
type: "POST",
url: "load_subcat_qset.php",
data: "subcatid="+ pc_id,
success: function(option)
{
$("#questionset").html(option);
}
});
}
else
{
$("#questionset").html("<option value=''>-- No question set selected --</option>");
}
return false;
});
});`
選択ボックスを空にするために empty() を使用しました。ただし、値はリセットされません。