1、需要引入的js及Demo下载链接:https://pan.baidu.com/s/1LzZjKsCqdt3p0q--o_wP8g 密码:vhyw
2、(1)引入js,貌似仅支持1.9后的jquery.js版本
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
(2)给下拉选<select>标签
<select id='select' class="selectpicker" multiple>
</select>
添加属性:data-live-search="true" 添加搜索框
data-actions-box="true" 添加全选全部选按钮
data-style="btn-danger" 添加样式(还可以设为btn-primary;btn-info;btn-success;btn-warning)
(3)初始化数据
$(function(){
//设置默认请选择全选全部选按钮名称
$('#select').selectpicker({
width : 300,//设置宽度
selectedText: 'cat',
header: 'Select a condiment',
noneSelectedText: '请选择',
deselectAllText: '全不选',//不知道为啥中文设置不成功
selectAllText: '全选'//不知道为啥中文设置不成功
});
//初始化下拉选
$("#select").html("<option value='1'>广州市</option>"+
" <option value='2'>深圳市</option>"+
" <option value='3'>珠海市</option>");
$('#select').selectpicker('refresh');//相当于刷新数据,必须有
//选中事件
$('#select').on('changed.bs.select',function(e){
console.log(e)
});
})
(4)获取选中的值
//获取选中值
function getValue(){
var values_arr = $("#select").val();//以数组形式获取值
var value_str = values_arr.join(",");//数组转字符串
alert(value_str);
}
(5)设置选项值
//设置选中值
function setValue(){
$('#select').selectpicker('val', ['1','2']);
}
(6)设置分组样式
//设置为分组形势
function setGroup(){
$("#select").html("<optgroup label='广东'>"+
"<option value='1'>广州</option>"+
"<option value='2'>深圳</option>"+
"<option value='3'>珠海</option>"+
"</optgroup>"+
"<optgroup label='广西'>"+
"<option value='4'>南宁</option>"+
"<option value='5'>柳州</option>"+
"<option value='6'>桂林</option>"+
"</optgroup>"+
"<optgroup label='山东'>"+
"<option value='7'>烟台</option>"+
"<option value='8'>青岛</option>"+
"<option value='9'>济南</option>"+
"</optgroup>");
$('#select').selectpicker('refresh');//相当于刷新数据,必须有
}