在前端界面中，很多查询功能，可能就需要用到查询的时候有多种选项。在bootstrap中他们有一个比较好的插件，既是bootstrap-select 插件，其实现功能如图所示
在使用插件的时候需要引入一下js，因为bootstrap 是依赖jquery的所以，jquery 引入是必不可少的
详细的使用可以参考次网址：https://blog.csdn.net/qq_37677519/article/details/78143522/
bootstrap-select开源地址：https://github.com/silviomoreto/bootstrap-select
bootstrap-select文档说明：http://silviomoreto.github.io/bootstrap-select/options/
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-select.min.css" rel="stylesheet" />
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-select.js"></script>
</head>
<div class="centent1Select">
<select id="usertype" title="全部" onchange="centent1SelectOnchang(this)"
class="selectpicker show-tick form-control" multiple data-live-search="false">
<option value="1">一级123</option>
<option value="2">二级</option>
<option value="3">三级</option>
<option value="4">四级</option>
<option value="5">五级</option>
</select>
</div>
<script type="text/javascript">
$(window).on('load', function () {
$('#usertype').selectpicker({
'selectedText': '1'
});
});
$('.selectpicker').selectpicker('val', '1');
//取出选择选择的下拉类型
function centent1SelectOnchang() {
var val = "", staffs = [];
//循环的取出插件选择的元素(通过是否添加了selected类名判断)
for (var i = 0; i < $("li.selected").length; i++) {
val = $("li.selected").eq(i).find(".text").text();
if (val != '') {
staffs.push(val);
}
}
console.log(staffs)
}
</script>
1、组件赋值
$('.selectpicker').selectpicker('val', '1');
2、组件禁用
$('.selectpicker').prop('disabled', true);
$('.selectpicker').selectpicker('refresh');
3、组件启用
$('.selectpicker').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');
//使用refresh方法更新UI以匹配新状态。
$('.selectpicker').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui。
$('.selectpicker').selectpicker('render');