bootstrap-select插件实现下拉框菜单多选，搜索，全选

一、插件开源地址

• bootstrap-select开源地址：https://github.com/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="https://cdn.staticfile.org/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="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  
  <!--  Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/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组件，纵观所有，还是这个稍微好用一些，不管是兼容性还是实现效果都还不错，有兴趣的可以用起来试试。
本文原创出处：http://www.cnblogs.com/landeanfen/