jquery - 依赖下拉引导选择
问题描述
我正在使用 bootstrap-select 并且我想要依赖下拉菜单。首先是类别:
<select class="selectpicker" id="category">
<option value="1"> Fruit </option>
<option value="2"> Animal</option>
</select>
第二个是item列表,class表示类别
<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>
解决方案
您需要遍历items
选择选项,但在您当前的代码中,您正在检查两个选择框的选项,因此没有必需类的值也会从category
选择框中隐藏。而是更改 $('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>
推荐阅读
- sql - 如何在oracle sql中生成payperiod
- node.js - MongoError:无法使用已结束的会话
- javascript - 带有数字键的 JavaScript 对象的内存使用情况
- reactjs - 如何在 nextjs 中跨组件共享 staticProps
- css - Webpack 正在导入其他包的 CSS
- php - PHP:组合和排序具有相同值的两个多维数组
- youtube-api - 检索直播或最近直播的视频列表
- asp.net - 如何在 Apache 虚拟目录中为 .NET Core 应用程序创建 url
- r - 通过 fileInput 重置 Shiny 应用程序(当用户浏览新数据时)
- angular - Angular:在界面中使用“组件”作为类型