使用Jquery从第一个下拉列表筛选第二个下拉列表

团队

我有两个下拉列表，分别是年份和章节

1年下拉列表将有显示全部、1、2、3、4的选项

2节下拉列表将具有所有节的选项，1节A、1节B、1节C、2节A、2节B、3节A、4节A、4节B

现在我的问题是，当我从“年份”下拉列表中选择“1”时，我需要从“节”下拉列表中筛选选项，其中有1个节-A、1个节-B、1个节-C，如果选中，则应通过隐藏以前的筛选器将2个筛选器更改为2个节-A、2个节-B。当我选择所有部分时，它应该显示所有部分

年份下拉列表：

<select required="required" class="form-control" id="div_years" name="div_years"><option value=""> Select </option><option value="0"> All Years </option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option></select> 

章节下拉列表：

<select required="required" class="form-control" id="div_sections" name="div_sections"><option value=""> Select </option><option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option><option value="24">2 Section - A</option><option value="25">2 Section - B</option><option value="28">3 Section - A</option><option value="32">4 Section - A</option><option value="33">4 Section - B</option></select>

我知道我需要使用.filter，但我没有得到我需要的准确输出

希望我的问题清楚。任何人都可以告诉我如何继续此操作。

使用附加的data-*属性绑定事件处理程序并基于值进行筛选

//获取第一个下拉列表并绑定更改事件处理程序 $'div_years'.changefunction{ //获取第二个下拉列表的选项并缓存它 var$options=$'div_sections' //如有必要，更新下拉列表值 瓦尔先生 //获取选项 .查找“选项” //最初显示所有 显示 //检查当前值是否不是0 如果此.value！=“0” 美元期权 //筛选出与第一个选项不对应的选项 .not'[data val='+this.value+']，[data val=]' //藏起来 隐藏 } 选择 常年 4. 3. 2. 1. 选择 1第A节 1节-B 第1节-C 2第A节 第2节-B 第3节-A 4第A节 第4节-B 这是答案

一旦尝试过，就复制并通过它

HTML

年

<select required="required" class="form-control" id="div_years">
    <option value=""> Select </option>
    <option value="0"> All Years </option>
    <option value="4">4</option>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="1">1</option>
</select> 

部分

<select required="required" class="form-control" id="div_sections" >
    <option value=""> Select </option>
    <option value="20">1 Section - A</option>
    <option value="21">1 Section - B</option>
    <option value="22">1 Section - C</option>
    <option value="24">2 Section - A</option>
    <option value="25">2 Section - B</option>
    <option value="28">3 Section - A</option>
    <option value="32">4 Section - A</option>
    <option value="33">4 Section - B</option>
</select>

Js

---

我希望它能对您有所帮助……

将所有相关代码包括在OPYears下拉列表中：选择所有年份4321节下拉列表：选择1节-A1节-B1节-C2节-A2节-B3节-A4节-A4节-添加OP中的代码不在评论中我已经添加了我的问题和下拉选项。@KiranKumar:很高兴要帮助您：

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
    jQuery(document).ready(function () {
        jQuery("#div_years").change(function () {
            var years = jQuery('#div_years').val();
            var select = jQuery('#div_sections');
            if (years == "1")
            {
                select.empty().append('<option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option>');
            }
            if (years == "2")
            {
                select.empty().append('<option value="24">2 Section - A</option><option value="25">2 Section - B</option>');
            }
            if (years == "3")
            {
                select.empty().append('<option value="28">3 Section - A</option>');
            }
            if (years == "4")
            {
                select.empty().append('<option value="32">4 Section - A</option><option value="33">4 Section - B</option>');
            }
            if (years == "0")
            {
                select.empty().append('<option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option><option value="24">2 Section - A</option><option value="25">2 Section - B</option><option value="28">3 Section - A</option><option value="32">4 Section - A</option><option value="33">4 Section - B</option>');
            }
        })
    })

</script>