JS組件系列——再推薦一款好用的bootstrap-select組件，親測還不錯

前言：以前分享過兩篇bootstrap下拉框的組件：JS組件系列——兩種bootstrap multiselect組件大比拼  和 JS組件系列——Bootstrap Select2組件使用小結 ，收到不少園友的關注和提問，最後總結這兩篇裏面的下拉框組件都存在一些大大小小的問題，好比兩種bootstrap mutiselect組件，界面渲染效果略差；再好比select2一些兼容性問題、多選的取值賦值等問題都困擾着博主以及不少園友，項目裏面的下拉框很早就替換爲今天介紹的這款組件，因此今天介紹給你們，讓你們多一個選擇也好！感謝你們的持續關注！

說點題外話。原本這篇早就準備寫了，不料最近項目準備走前端化開發路線，可忙壞博主了，一時間，Node.js、npm、webpack、react、react-router、ant.design等等技術都得學呀，腦子真是個好東西，可以一會兒容納這麼多新知識，雖然各類不適應，但時間一長就慢慢習慣了，所幸博主常常關注這方面的技術，因此學起來並無那麼吃力。關於vue和react，不少羣友都討論過它們的優點和劣勢，其實博主以爲說不上哪一個組件更優，關鍵得看項目適應哪一種生態，咱們選用react很大一部分緣由就是看中了ant.design的效果和豐富的組件庫。好了，再說就跑題了，之後博主分享搭建前端環境的時候再來細說。

本文原創地址：http://www.cnblogs.com/landeanfen/p/7457283.html

1、組件開源地址以及API說明

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/

2、組件效果示例

一睹初容

多選效果

可配置搜索功能

分組選中

設置最多選中項爲2個

 

 自定義說明Title，好比咱們定義爲「請選擇省份」

 某些狀況下若是多選的數量比較多，咱們能夠顯示「縮略模式」。好比當選擇了兩項以上的時候

自定義樣式

顯示圖標加文字

顯示帶顏色的標籤

展開最多顯示可配置的個數，不如最多顯示3項

 全選和反選

以上都是些經常使用功能，更多效果能夠查看官方示例！

3、使用示例

一、基礎示例

既然是bootstrap-select，組件確定是依賴bootstrap的，而bootstrap又是依賴jquery的，因此使用組件必須引用以下文件。

<link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="Content/jquery-1.9.1.min.js"></script>
<script src="Content/bootstrap/js/bootstrap.min.js"></script>
<script src="Content/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

最後一個文件 defaults-zh_CN.min.js 非必需，是組件中文化的時候才須要引用。

使用就更加簡單了，不用任何已經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>

二、其餘效果示例

上面是最簡單的使用，下面就將一些經常使用的效果給出代碼示例，高手請直接跳過此段。

給組件加搜索功能

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

設置最多選中項爲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>

默認樣式選擇

<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>

三、組件取值賦值

上面都是組件的初始化的一些東西，通常狀況下，咱們須要對組件進行取值和賦值，咱們應該如何操做呢。

3.一、組件取值

關於組件取值保持原生的jquery方法，好比 var value = $('#sel').val(); 這樣是否是很簡單，須要注意的是，若是是多選，這裏獲得的value變量是一個數組變量，形如 ['1','2','3']。

3.二、組件賦值

組件賦值就須要稍微變換一下了，若是你直接 $('#sel').val('1'); 這樣賦值將會無效，正確的賦值方法爲：

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

在一些級聯選擇的使用場景中，常常須要在賦值的時候順便觸發一下組件的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');

五、組件封裝

上面關於組件的初始化介紹了那麼多，都是經過class='selectpicker'去作初始化的，不少狀況下，咱們的select的option都是動態獲取，而後再初始化的，因而乎博主仔細尋找api，看裏面是否有遠程獲取數據，很遺憾，組件沒有支持這種遠程獲取數據的方法。不要緊，咱們本身封裝一個ajax請求，而後動態構造option又有多難呢？這裏又得提一下原來那篇封裝js組件的文章了，咱們按照那篇文章的思路封裝一個不就行了。如下給出一個參考。

(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: '請選擇',
       
   };

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

bootstrapSelect

 這樣封裝以後，咱們直接使用以下代碼便可初始化組件。

$('#sel').bootstrapSelect({
    url:'/a/b',
    data: {},
    valueField: 'value',
    textField: 'text',
});

4、源碼下載

不少園友和羣友最喜歡的就是demo下載了，博主想說的是但願各位不要太依賴demo，本身先動手嘗試能夠提升你的學習能力，拿到demo的惟一優點就是上手快一點，可是不利於你們學習。固然本文的demo整理好以後會上傳到github，歡迎關注。

5、總結

至此，本文結束，博主介紹過多個bootstrap的select組件，縱觀全部，仍是這個稍微好用一些，不論是兼容性仍是實現效果都還不錯，有興趣的能夠用起來試試。若是你以爲本文可以幫助你，能夠右邊隨意 打賞 博主。

本文原創出處：http://www.cnblogs.com/landeanfen/

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利