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 Section - 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 ，但我无法获得所需的确切输出。

希望我的问题很明确。任何人都可以告诉我如何继续这样做。

Answer 1

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

＆＃13;

// 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();
})

＆＃13;

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

＆＃13;

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

＆＃13;

// 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);
})

＆＃13;

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

＆＃13;

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>

我希望它对你有帮助......

使用Jquery

2 个答案: