我正在使用bootstrap-select,并且希望具有依赖项下拉列表。 第一个是类别:
<select class="selectpicker" id="category">
<option value="1"> Fruit </option>
<option value="2"> Animal</option>
</select>
第二个是项目列表,类指示类别
<select class="selectpicker" id="items">
<option class="1" value="1"> Banana </option>
<option class="1" value="2"> Apple </option>
<option class="2" value="3"> Cat </option>
<option class="2" value="4"> Dog</option>
</select>
我的目标是,当用户选择一个或多个类别过滤器时,它还会过滤项目下拉列表
此代码仅适用于一个选择,而不适用于2。我该怎么做?
<script>
$("#category").change(function () {
var category= $(this).val());
$('option').each(function() {
if ($(this).hasClass(category)) {
$(this).show();
} else {
$(this).hide();
}
});
$('.selectpicker').selectpicker('refresh');
});
</script>
答案 0 :(得分:1)
您需要遍历items
选择选项,但是在当前代码中,您正在检查两个选择框的选项,因此category
select-中隐藏了没有必需类的值-也可以将 $('option')
更改为 $('#items option')
,然后将值更改一次,您可以使用.val("default").trigger('change')
到items
选择框来设置一些默认选项。
演示代码 :
$("#category").change(function() {
var category = $(this).val();
//loop through second selects options
$('#items option').each(function() {
//if option has default class
if ($(this).hasClass(category) || $(this).hasClass("default")) {
$(this).show();
} else {
$(this).hide();
}
});
$('.selectpicker').selectpicker("refresh");
$('#items').val("0").trigger('change');//set default value as selected
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="category">
<option value="1"> Fruit </option>
<option value="2"> Animal</option>
</select>
<select class="selectpicker" id="items">
<!--added this just to keep default value selcted-->
<option class="default" value="0"> --Select-- </option>
<option class="1" value="1"> Banana </option>
<option class="1" value="2"> Apple </option>
<option class="2" value="3"> Cat </option>
<option class="2" value="4"> Dog</option>
</select>