bootstrap下拉框——bootstrap-select

使用示例

1、基础示例

既然是bootstrap-select，组件肯定依赖bootstrap的，而bootstrap又依赖jquery的，所以使用组件必须引用以下文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-select.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-select.js"></script>

使用比较简单，不需要引用任何js，直接使用class就可以初始化

<select class="selectpicker">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

给一个select标签加上selectpicker样式即可

多选

<select class="selectpicker" multiple>
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

2、其他效果示例

上面是最简单的使用，下面就将一些常用的效果给出代码示例

给组件加搜索功能

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

选项分组

<select class="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>

设置最多选中项为2个

<select class="selectpicker" multiple data-live-search="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>

缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效

<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
    <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" 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>

默认样式选择

//默认样式有：btn-primary、btn-info、btn-success、btn-warning、btn-danger
<select class="selectpicker" data-style="btn-primary">
  ...
</select>

3、组件取值赋值

3.1、组件取值
关于组件取值保持原生的jquery方法，比如：var value = $(‘#sel’).val();需要注意的是，如果是多选，这里得到的value变量是一个数组变量，形如：[‘1’,’2’,’3’]

3.2、组件赋值
组件赋值就需要稍微变换一下了，如果你直接$(‘#sel’).val(‘1’)，这样赋值将会失效，正确的赋值方法为：

$('.selectpicker').selectpicker('val','1');

在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的chang事件，我们可以这么做

$('.selectpicker').selectpicker('val','1').trigger("change");

如果是多选的赋值也是一样

$('.selectpicker').selectpicker('val',['1','2','3']).trigger("change");

4、组件其他用法

全选： $(‘.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');

5、组件封装

上面关于组件的初始化都是通过class=’selectpicker’去做初始化的，很多情况下，我们的select的option都是动态获取的，然后再初始化。这里封装一个ajax请求，然后动态构造option

(function ($) {
    //1.定义jquery的扩展方法bootstrapSelect
   $.fn.bootstrapSelect = function (options, param) {
       if (typeof options == 'string') {
           return $.fn.bootstrapSelect.methods[options](this, param);
       }
       //2.将调用时候传过来的参数和default参数合并
       options = $.extend({}, $.fn.bootstrapSelect.defaults, options || {});
       //3.添加默认值
       var target = $(this);
       if (!target.hasClass("selectpicker")) target.addClass("selectpicker");
       target.attr('valuefield', options.valueField);
       target.attr('textfield', options.textField);
       target.empty();
       var option = $('<option></option>');
       option.attr('value', '');
       option.text(options.placeholder);
       target.append(option);
       //4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
       if (options.data) {
           init(target, options.data);
       }
       else {
           //var param = {};
           options.onBeforeLoad.call(target, options.param);
           if (!options.url) return;
           $.getJSON(options.url, options.param, function (data) {
               init(target, data);
           });
       }
       function init(target, data) {
           $.each(data, function (i, item) {
               var option = $('<option></option>');
               option.attr('value', item[options.valueField]);
               option.text(item[options.textField]);
               target.append(option);
           });
           options.onLoadSuccess.call(target);
       }
       target.unbind("change");
       target.on("change", function (e) {
           if (options.onChange)
               return options.onChange(target.val());
       });
   }

   //5.如果传过来的是字符串，代表调用方法。
   $.fn.bootstrapSelect.methods = {
       getValue: function (jq) {
           return jq.val();
       },
       setValue: function (jq, param) {
           jq.val(param);
       },
       load: function (jq, url) {
           $.getJSON(url, function (data) {
               jq.empty();
               var option = $('<option></option>');
               option.attr('value', '');
               option.text('请选择');
               jq.append(option);
               $.each(data, function (i, item) {
                   var option = $('<option></option>');
                   option.attr('value', item[jq.attr('valuefield')]);
                   option.text(item[jq.attr('textfield')]);
                   jq.append(option);
               });
           });
       }
   };

   //6.默认参数列表
   $.fn.bootstrapSelect.defaults = {
       url: null,
       param: null,
       data: null,
       valueField: 'value',
       textField: 'text',
       placeholder: '请选择',
       onBeforeLoad: function (param) { },
       onLoadSuccess: function () { },
       onChange: function (value) { }

   };


})(jQuery);

$(function(){
  $('#sel').bootstrapSelect({
    url:'/a/b',
      data: 
        [
          {
            value: "a",
            text: "1"
          },
          {
            value: "b",
            text: "2"
          },
          {
            value: "c",
            text: "3"
          }
      ],
      valueField: 'value',
      textField: 'text'
  });

   //初始化
  $(".selectpicker").each(function () {
      var target = $(this);
      target.attr("title", $.fn.bootstrapSelect.defaults.placeholder);
      target.selectpicker();
  });
})

html页面：

<select id="sel"></select>