文章目录
一、插件开源地址二、插件的使用三、插件取值赋值四、插件的其他用法五、插件远程获取数据（这里就不封装了）六、总结一、插件开源地址
bootstrap-select开源地址：/silviomoreto/bootstrap-select
bootstrap-select使用示例：http://silviomoreto.github.io/bootstrap-select/examples/
bootstrap-select文档说明：http://silviomoreto.github.io/bootstrap-select/options/
二、插件的使用
引入 bootstrap-select插件
<!-- Bootstrap 核心 CSS 文件 --><link href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap-select 核心 CSS 文件 --><link rel="stylesheet" href="/bootstrap/bootstrap-select.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="/jquery/2.1.1/jquery.min.js"></script><!-- Bootstrap 核心 JavaScript 文件 --><script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Bootstrap-select 核心 JavaScript 文件 --><script src="/bootstrap/bootstrap-select.min.js"></script><!-- 中文化组件 --><script src="/bootstrap/defaults-zh_CN.js"></script>
一睹初容
/*multiple : 多选data-live-search="true" : 是否开启搜索功能data-actions-box="true" : 是否开启全选功能data-max-options="2" : 设置对多选中2个data-selected-text-format="count > 3" ： 缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效*/<select class="selectpicker" multiple data-live-search="true" data-actions-box="true" data-max-options="2" ><option value="1">系统管理员</option><option value="2">销售</option><option value="3">客户经理</option><option value="4">技术经理</option><option value="5">人事</option> </select>
选项分组
<select class="form-control selectpicker" data-live-search="true" multiple><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>
显示带颜色的标签
<select class="form-control selectpicker" title="请选择省份" multiple><option data-content="<span class='label label-success'>广东省</span>">广东省</option> <option data-content="<span class='label label-info'>广西省</span>">广西省</option> <option data-content="<span class='label label-warning'>福建省</span>">福建省</option> <option data-content="<span class='label label-danger'>山东省</span>">山东省</option> </select>
默认样式选择
<select class="selectpicker" data-style="btn-primary">...</select><select class="selectpicker" data-style="btn-info">...</select><select class="selectpicker" data-style="btn-success">...</select><select class="selectpicker" data-style="btn-warning">...</select><select class="selectpicker" data-style="btn-danger">...</select>
三、插件取值赋值
插件取值
var value = $('#sel').val();//如果是多选，这里得到的value变量是一个数组变量，形如 ['1','2','3']
插件赋值
$('.selectpicker').selectpicker('val', '1');//在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的change事件，我们可以这么做。$(function(){$('.selectpicker').change(function(){alert('change')})})$('.selectpicker').selectpicker('val', '1').trigger("change");//如果是多选的赋值，也是一样$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");
全选四、插件的其他用法
$('.selectpicker').selectpicker('selectAll');
反选
$('.selectpicker').selectpicker('deselectAll');
适应手机
$('.selectpicker').selectpicker('mobile');
插件禁用
$('.disable-example').prop('disabled', true);$('.disable-example').selectpicker('refresh');//刷新
插件启用
$('.disable-example').prop('disabled', false);$('.disable-example').selectpicker('refresh');//刷新
插件销毁
$('.selectpicker').selectpicker('destroy');
五、插件远程获取数据（这里就不封装了）
$(function (){//这里就使用ajax请求获取数据，拼装到<select>标签下$.ajax({url: "test/list",method: "get",success: function (data){$("#sel").empty();var json=eval(data.data);$.each(json,function(index,item){$("#sel").append("<option value="+json[index].id+" >"+json[index].name+"</option>" );});$('#sel').selectpicker('refresh');//刷新下才会生效}})})
注意当你引入后出现了下拉框页面，但是点下拉按钮没有反应很有可能是你的js或css样式有重的
六、总结
至此，本文结束，博主介绍过多个bootstrap的select组件，纵观所有，还是这个稍微好用一些，不管是兼容性还是实现效果都还不错，有兴趣的可以用起来试试。
出处：/landeanfen/
