Javascript 条件下拉列表未按预期工作

这与

HTML

和

JavaScript

有关。我是

HTML

和

JavaScript

的新手。 我有四个

下拉列表

。前两者相互依赖。接下来的两个是相互依赖的。前两个

下拉列表

工作正常。 例如，如果选择了无学校选项，则第二个

下拉列表将按预期填充值

在接下来的两个
下拉列表中，情况并非如此。如果在第三个
下拉列表中选择了No，则第四个
下拉列表应填充一个列表。
这种情况不会发生。
请运行代码以了解发生了什么

提前谢谢。
当做
大卫

代码是：


函数动态（列表索引）
{
document.getElementById（“子类别”）.length=0；
开关（列表索引）
{
案例“无附件”：
document.getElementById（“子类别”）。选项[0]=新选项（“请选择原因”）；
document.getElementById（“子类别”）.options[1]=新选项（“不知道该做什么”，“不知道该做什么”）；
document.getElementById（“子类别”）。选项[2]=新选项（“无法提供护送”、“无法提供护送”）；
document.getElementById（“子类别”）。选项[3]=新选项（“无法在学校设置中调整”，“无法在学校设置中调整”）；
document.getElementById（“子类别”）。选项[4]=新选项（“超高行驶距离”、“超高行驶距离”）；
document.getElementById（“子类别”）。选项[5]=新选项（“负担不起旅行”、“不能长途旅行”）；
打破
案例“Spl_sch”：
document.getElementById（“子类别”）。选项[0]=新选项（“请选择原因”）；
document.getElementById（“子类别”）.options[1]=新选项（“唯一可用选项”、“唯一可用选项”）；
document.getElementById（“子类别”）。选项[2]=新选项（“无法在主流学校调整”，“无法在主流学校调整”）；
document.getElementById（“子类别”）。选项[3]=新选项（“拒绝主流学校入学”、“拒绝主流学校入学”）；
document.getElementById（“子类别”）。选项[4]=新选项（“家长首选选项”、“家长首选选项”）；
document.getElementById（“子类别”）。选项[2]=新选项（“不提供护送/运输”，“不提供护送/运输”）；
document.getElementById（“子类别”）。选项[2]=新选项（“不满意学校的进步质量”、“不满意学校的进步质量”）；
打破
案例“家庭教育”：
document.getElementById（“子类别”）。选项[0]=新选项（“请选择原因”）；
document.getElementById（“子类别”）。选项[1]=新选项（“首选选项”、“首选选项”）；
document.getElementById（“子类别”）.options[2]=新选项（“不知道该做什么”，“不知道该做什么”）；
document.getElementById（“子类别”）。选项[3]=新选项（“无法提供护送”、“无法提供护送”）；
document.getElementById（“子类别”）。选项[4]=新选项（“无法在学校设置中调整”，“无法在学校设置中调整”）；
document.getElementById（“子类别”）。选项[5]=新选项（“超高行驶距离”、“超高行驶距离”）；
打破
}
返回true；
}
函数动态_yn（列表索引）
{
document.getElementById（“子类别”）。长度=0；
开关（列表索引）
{
案例“无记录”：
document.getElementById（“子_类别”）。选项[0]=新选项（“请选择原因”，”）；
document.getElementById（“子_类别”）。选项[1]=新选项（“不知道该做什么”，“不知道该做什么”）；
document.getElementById（“子_类别”）。选项[2]=新选项（“无法提供护送”、“无法提供护送”）；
document.getElementById（“子_类别”）。选项[3]=新选项（“无法在学校设置中调整”，“无法在学校设置中调整”）；
document.getElementById（“子_类别”）。选项[4]=新选项（“超高行驶距离”、“超高行驶距离”）；
document.getElementById（“子类别”）。选项[5]=新选项（“负担不起旅行”、“不能长途旅行”）；
打破
}
返回true；
}

上学
选择就读的学校
没有人上学
包容性主流
特殊学校
集成Spl+正常
家庭教育
开放教育
为什么?？
请选择原因
我检查了你的代码，Issue就要来了，因为你的上一个下拉列表中有两个元素具有相同的id，因此脚本没有更新选项

第一个

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



第二个

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

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>

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

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