在前端界面中，很多查詢功能，可能就需要用到查詢的時候有多種選項。在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');