logo标签列表

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

jqueryselectdropdown
3

团队，

我有两个下拉框，分别为“年份”和“章节”。

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，但我没有得到我所需要的确切输出。希望我的问题很清楚。请问有人可以告诉我如何继续吗？
2
包括所有相关代码到OP - guradio
年份下拉菜单：<select required="required" class="form-control" id="div_years" name="div_years"><option value=""> 选择 </option><option value="0"> 所有年份 </option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option></select> - Kiran Kumar
下拉菜单列表：<select required="required" class="form-control" id="div_sections" name="div_sections"><option value="">请选择</option><option value="20">1区 - A</option><option value="21">1区 - B</option><option value="22">1区 - C</option><option value="24">2区 - A</option><option value="25">2区 - B</option><option value="28">3区 - A</option><option value="32">4区 - A</option><option value="33">4区 - B</option></select> - Kiran Kumar
请将代码添加到原始帖子中，而不是评论中。 - guradio
我已经在我的问题中添加了下拉选项。 - Kiran Kumar
2个回答
4

绑定change()事件处理程序，并使用附加的data-*属性根据值进行筛选。

// get first dropdown and bind change event handler
$('#div_years').change(function() {
  // get optios of second dropdown and cache it
  var $options = $('#div_sections')
    // update the dropdown value if necessary
    .val('')
    // get options
    .find('option')
    // show all of the initially
    .show();
  // check current value is not 0
  if (this.value != '0')
    $options
    // filter out options which is not corresponds to the first option
    .not('[data-val="' + this.value + '"],[data-val=""]')
    // hide them
    .hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" data-val="1">1 Section - A</option>
  <option value="21" data-val="1">1 Section - B</option>
  <option value="22" data-val="1">1 Section - C</option>
  <option value="24" data-val="2">2 Section - A</option>
  <option value="25" data-val="2">2 Section - B</option>
  <option value="28" data-val="3">3 Section - A</option>
  <option value="32" data-val="4">4 Section - A</option>
  <option value="33" data-val="4">4 Section - B</option>
</select>

更新： 或者您可以使用 prop() 方法禁用属性而不是隐藏它们。

// get first dropdown and bind change event handler
$('#div_years').change(function() {
  // get optios of second dropdown and cache it
  var $options = $('#div_sections')
    // update the dropdown value if necessary
    .val('')
    // get options
    .find('option')
    // enable all options
    .prop('disabled', false);
  // check current value is not 0
  if (this.value != '0')
    $options
    // filter out options which is not corresponds to the first option
    .not('[data-val="' + this.value + '"],[data-val=""]')
    // disable options    
    .prop('disabled', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" data-val="1">1 Section - A</option>
  <option value="21" data-val="1">1 Section - B</option>
  <option value="22" data-val="1">1 Section - C</option>
  <option value="24" data-val="2">2 Section - A</option>
  <option value="25" data-val="2">2 Section - B</option>
  <option value="28" data-val="3">3 Section - A</option>
  <option value="32" data-val="4">4 Section - A</option>
  <option value="33" data-val="4">4 Section - B</option>
</select>

@KiranKumar：很高兴能帮助你 :) - Pranav C Balan
0

这是答案

尝试一下，只需复制并粘贴即可...

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.

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

希望对你有所帮助...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接