这与 HTML
和 JavaScript
相关。我是 HTML
和 JavaScript
的新手。
我有四个 DropDowns
。前两者相互依赖。接下来的两个是相互依赖的。前两个 DropDowns
工作完美。
例如如果选择了 No school 选项,则第二个 DropDown
会按预期填充值。
接下来的两个 DropDowns
不会发生同样的情况。如果 在第三个 DropDown
中没有选择 ,则第四个 DropDown
应该填充一个列表。
这不会发生。
请运行代码以了解发生了什么。
提前致谢。
问候
大卫
代码是:
function dynamic_sch(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "No_sch_att" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("subcategory").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
case "Spl_sch" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Only option available","Only option available");
document.getElementById("subcategory").options[2]=new Option("Could not adjust in mainstream school","Could not adjust in mainstream school");
document.getElementById("subcategory").options[3]=new Option("Denied admission in mainstream school","Denied admission in mainstream school");
document.getElementById("subcategory").options[4]=new Option("Parents preferred choice","Parents preferred choice");
document.getElementById("subcategory").options[2]=new Option("Non availability of escort/transport","Non availability of escort/transport");
document.getElementById("subcategory").options[2]=new Option("Not happy with progress quality in school","Not happy with progress quality in school");
break;
case "home_edn" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Preferred choice","Preferred choice");
document.getElementById("subcategory").options[2]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[3]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[4]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[5]=new Option("Cant travel long distance","Cant travel long distance");
break;
}
return true;
}
function dynamic_yn(listindex)
{
document.getElementById("sub_category").length = 0;
switch (listindex)
{
case "no_rec" :
document.getElementById("sub_category").options[0]=new Option("Please select reason","");
document.getElementById("sub_category").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("sub_category").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("sub_category").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("sub_category").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("sub_category").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
}
return true;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<body>
<div style="display:inline-block">
<div class="category_div" id="category_div">
<label>School attended</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_sch(this.options[this.selectedIndex].value);">
<option value="">Select School attended</option>
<option value="No_sch_att">No school attended</option>
<option value="Incl_mainst">Inclusive Mainstream</option>
<option value="Spl_sch">Special School</option>
<option value="Int_spl_nrml">Integrated Spl+Normal</option>
<option value="home_edn">Home Education</option>
<option value="Opn_sch">Open Schooling</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category_div" id="sub_category_div">
<div class="category_div" id="category_div">
<label>Reason Why ?</label>
<select name="subcategory" id="subcategory" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="subcategory" id="subcategory"
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
<div style="display:inline-block">
<div class="category" id="category">
<label>Access to play</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_yn(this.options[this.selectedIndex].value);">
<option value="">Select Choice</option>
<option value="Yes_rec">Yes</option>
<option value="no_rec">No</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category" id="sub_category">
<div class="category" id="category">
<label>Reason Why ?</label>
<select name="sub_category" id="sub_category" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="sub_category" id="sub_category">
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
</body>
</html>
最佳答案
我检查了你的代码,问题即将到来,因为你的最后一个下拉菜单有两个具有相同 ID 的元素,因此脚本没有更新选项
第一
<div class="sub_category" id="sub_category">
第二个
<select name="sub_category" id="sub_category"
更改 div 的 id,它应该可以工作
关于javascript - 条件下拉无法按预期工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55016808/