条件下拉菜单无法按预期运行

时间：2019-03-06 06:21:31

标签： javascript html

这与HTML和JavaScript有关。我是HTML和JavaScript的新手。 我有四个DropDowns。前两个相互依赖。接下来的两个相互依赖。前两个DropDowns可以正常工作。 例如如果选择了“没有学校”选项，则第二个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>

2 个答案:

答案 0 :(得分：0)

我检查了您的代码，由于您的上一个下拉列表出现问题，因此您有两个具有相同ID的元素，因此脚本未更新选项

第一个

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

第二个

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

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

答案 1 :(得分：0)

在HTML中的文件id应该是唯一的。在您的代码段中，您有多个具有相同id的元素。例如，

<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>

在以上代码中，您将category作为id到div和select。更改id中的div，

<div class="category" id="category_div">

也是这个

<div class="sub_category" id="sub_category">
    <div class="category" id="category"> //This id should be removed
       <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>

在以上代码中，您将sub_category作为id到div和select。另外，您还需要删除id="category"，这不是必需的。更改id中的div，

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

Demo

注意：：您在最后一个块中添加了2个具有相同id的选择。如果不需要，可以删除一个。

相关问题
最新问题