第一步：引入css和js文件
<%-- css文件 --%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<%-- js文件 --%>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
第二步：添加jQuery代码用于回显
$(window).on('load', function () {
$('#my_test').selectpicker({
'selectedText': 'cat'
});
});
其中，my_test 是前端下拉选择框的id属性。'selectedText': 'cat' 不要改动。
第三步：设置控件
<div>
<select id="my_test" class="selectpicker" title="请选择" multiple data-actions-box="true" >
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">广州市</option>
<option value="4">长沙市</option>
<option value="5">杭州市</option>
<option value="6">成都市</option>
<option value="7">济宁市</option>
<option value="8">烟台市</option>
<option value="9">东营市</option>
</select>
</div>
介绍select标签里比较重要的属性。
- id：用于回显（选中后在控件上显示选择的内容）；用于后期获取页面上select标签的值来提交表单。
- class：样式，填写
selectpicker就够了 - multiple：添加这个字段，代表允许多选(不用设置为"true")，多选的值以list的形式装载
- data-actions-box：多选后，支持全选与反选。单选时设置无效果。
- data-live-search：搜索下拉框的项。单选与多选情况下都可用
- title：标题，最主要的是可以充当默认选择项。
- 在单选情况下，如果不设置title，显示第一项内容，默认选择第一项；设置后显示title内容，默认什么都不选；
- 在多选情况下，如果不设置title，显示js文件里自带的“Nothing Selected”，默认什么都不选；设置后显示title内容，默认什么都不选；
表单提交时获取值的方法
var my_test = $("#my_test").val();
将下拉框恢复初始状态的方法
document.getElementById("my_test").options.selectedIndex = 0;
$("#my_test").selectpicker('refresh');
效果
单选
多选
关于分组
对于option，如果非常多并且有类别的话，也可以设置一个分组，比如下面的。
<select id="my_test" class="form-control" title="请选择" >
<optgroup label="大城市">
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">广州市</option>
</optgroup>
<optgroup label="中城市">
<option value="1">长沙市</option>
<option value="2">杭州市</option>
<option value="3">成都市</option>
</optgroup>
<optgroup label="小城市">
<option value="1">济宁市</option>
<option value="2">烟台市</option>
<option value="3">东营市</option>
</optgroup>
</select>
效果
单选
多选
