使用Jquery从第一个下拉列表过滤第二个下拉列表

问题描述

团队，

我有两个下拉菜单，分别是年份"和部分" .

I have two dropdowns saying "Years" and "Sections".

1)Years(年份)下拉列表将具有以下选项:显示全部"，"1"，"2"，"3"，"4"

1) Years dropdown will be having options as "Show All", "1", "2", "3", "4"

2)节下拉菜单将具有以下选项:所有节"，"1节-A"，"1节-B"，"1节-C"，"2节-A"，"2部分-B"，"3部分-A"，"4部分-A"，"4部分-B"

2) Sections dropdown will be having options as "All Sections", "1 Section - A", "1 Section - B", "1 Section - C", "2 Section - A", "2 Section - B", "3 Section - A", "4 Section - A", "4 Section - B"

现在我的问题是，当我从年份"下拉列表中选择"1" 时，我需要从部分"下拉列表中过滤确实具有"1部分-A"，"1"的选项部分-B"，"1部分-C" ，如果选择了"2" 过滤器，则应更改为"2部分-A"，"2部分-B" .当我选择所有部分"时，它应该显示所有部分.

Now my question is, When I select "1" from "Years" dropdown I need to filter the options from Sections dropdown which do have "1 Section - A", "1 Section - B", "1 Section - C", if selected "2" filter should change to "2 Section - A", "2 Section - B" by hiding earlier filters. When I select "All Sections", it should display all sections.

年份下拉列表:

<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 ，但是我没有得到所需的确切输出.

I know that I need to use .filter but I'm not getting exact output what I need.

希望我的问题很清楚.谁能让我知道如何进行此操作.

Hope my question is clear. Can any one please let me know how to proceed on this.

推荐答案

绑定 change() 事件处理程序并使用附加的data-*属性基于该值进行过滤.

Bind change() event handler and filter based on the value using an additional data-* attribute.

// 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() 方法而不是隐藏它们.

UPDATE : Or you can disable the properties using prop() method instead of hiding them.

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

这篇关于使用Jquery从第一个下拉列表过滤第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！