![](/img/trans.png)
[英]Bootstrap-select - selectpicker class dropdown not showing
[英]Depend dropdown bootstrap-select
我正在使用 bootstrap-select 并且我想要依赖下拉列表。 首先是类别:
<select class="selectpicker" id="category">
<option value="1"> Fruit </option>
<option value="2"> Animal</option>
</select>
第二个是物品列表,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>
如何使用ajax调用加载第二个选择数据。 其实我有一个州和城市的下拉选项。 一次加载所有城市是不可能的。 所以我想根据所选的州加载城市。 下拉图片
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.