这与 HTMLJavaScript 相关。我是 HTMLJavaScript 的新手。
我有四个 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/

10-12 12:56
查看更多