Team,
我有两个下拉菜单说“年”和“节”.
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但我没有得到我需要的确切输出。
希望我的问题很清楚。任何人都可以让我知道如何继续进行此操作。
Bind change() http://api.jquery.com/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>
UPDATE :或者您可以使用禁用属性prop() http://api.jquery.com/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
