javascript - 条件下拉菜单未按预期工作

Question

这与HTML 和JavaScript 有关。我是 HTML 和 JavaScript 的新手。我有四个 DropDowns。前两者相互依赖。接下来的两个是相互依赖的。前两个 DropDowns 工作得很好。例如如果选择“无学校”选项，第二个 DropDown 将按预期填充值。

接下来的两个 DropDowns 不会发生同样的情况。如果在第三个 DropDown 中选择了 No，则第四个 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>

Answer 1

我检查了你的代码，问题即将到来，因为你的最后一个下拉列表有两个具有相同 id 的元素，因此脚本没有更新选项

第一个

<div class="sub_category" id="sub_category">

第二个

<select name="sub_category" id="sub_category"

更改 div 的 id，它应该可以工作