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

Question

团队，

我有两个下拉菜单显示“年”和“节”。

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”的选项Section - B", "1 Section - C"，如果选择 "2" 过滤器应更改为 "2 Section - A", "2 Section - B" strong> 通过隐藏较早的过滤器。当我选择“所有部分”时，它应该显示所有部分。

年份下拉列表：

<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，但我没有得到我需要的准确输出。

希望我的问题很清楚。任何人都可以让我知道如何进行此操作。

Answer 1

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

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

Answer 2

这是答案

一旦尝试，只需复制并粘贴它..

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>

希望对你有帮助...