bootstrap-select 的多選+模糊查詢下拉框詳解（官方示例文檔解讀）

時間 2019-11-06

標籤 bootstrap select 模糊查詢下拉詳解官方示例文檔解讀欄目 Bootstarp 简体版

原文原文鏈接

引入問題

以前博主在實際開發中遇到了一個問題，就是須要既支持多選又同時支持模糊查詢的下拉控件，你們所熟知的比較強大的下拉框插件bootstrap-select2，博主當時也參考過，可是發現它的多選效果作的比較差，相似這種，css

這樣的多選控件必需要控件足夠長，若是選擇超過必定限制就會出現樣式崩潰，你懂的~後面我無心中發現了bootstrap-select插件，瞬間發現它很高大上呀！它便可以支持單選，又支持多選，最厲害的是居然還自帶模糊查詢功能！先給你們展現下炫酷的效果吧：

這樣的控件不用真是惋惜了，後面博主找了不少文檔和博客參考，可是發現不少都沒有寫清楚具體的用法，只是簡單的擺一個例子，並無太大的參考價值，博主經過研究官網的相關文檔以及結合自身開發經驗，把bootstrap-select的用法作一個清晰的梳理，供你們參考。html

官方插件地址: silviomoreto.github.io/bootstrap-s…git

Github地址: github.com/silviomoret…github

應用示例（參考官方文檔Basic examples）

1.單選

簡單單選選中默認是沒有「√」的。

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現bootstrap

分組單選注意加入optgroup標籤

<select class="selectpicker">
     <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
     </optgroup>
    <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
    </optgroup>
   </select>
複製代碼

效果展現bash

2.多選框

相比於單選框加入了一個multiple標籤app

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現ide

3.模糊查詢

添加一個data-live-search="true"的屬性spa

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog</option>
  <option>Fries</option>
  <option>Soda</option>
  <option>Burger</option>
  <option>Shake</option>
  <option>Smile</option>
</select>
複製代碼

效果展現插件

4.多選限制

添加屬性data-max-options="2"或者在初始化時用maxOptionsText作限制

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

或者在初始化selectpicker時設置maxOptionsText

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'maxOptionsText':2;
             })
複製代碼

效果展現

5.自定義按鈕的文本

經過屬性title來控制。

選擇框文本

<select class="selectpicker" multiple title="請選擇一個">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

選擇顯示單條文本意思就是選中相應的option，就展現option的title，好比選中"Burger, Shake and a Smile",文本框內顯示Combo 2。

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>
複製代碼

效果展現

6.多選框格式化選擇文本

經過屬性 data-selected-text-format 來控制選中的值的顯示可選的值有以下4個：

1.values：逗號分隔的選定值列表（系統默認）；

2.count：若是選擇了一個項，則顯示選項值。若是選擇多於一個，則顯示所選項的數量,如選擇2個，則下拉框顯示2個已被選中；

3.count > x：當count的值小於x時，展現逗號分隔的選定值列表;當count>x時，顯示x個被選中；

4.static：不管選中什麼，都只展現默認的選中文本。下面給幾個簡單示例

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>
複製代碼

效果展現

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>
複製代碼

效果展現

7.樣式選擇

按鈕樣式經過data-style來設置按鈕的樣式

<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>
複製代碼

效果展現

單選框樣式這裏要注意一下，單選框默認是沒有多選框的選中以後的"√"圖標的，若是想要加上這個圖標的話，須要在樣式中加入show-tick便可。

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

菜單的箭頭 Bootstrap的菜單箭頭也能夠被添加進來，須要加入樣式show-menu-arrow，我的感受差異不大

<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

style樣式自定義 bootstrap-select的樣式不是死的，能夠自定義style樣式，相似最基本的css樣式添加。

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
複製代碼

效果展現

寬度（Width）

1.引用bootstrap的樣式

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>
複製代碼

2.使用data-width屬性，來定義寬度，可選的值有如下4個 auto：select的寬度由option中內容寬度最寬的哪一個決定； fit：select的寬度由實際選中的option的寬度決定； 100px：select的寬度定義爲100px； 50%：select的寬度設置爲父容器寬度的50%。

<select class="selectpicker" data-width="auto">
   <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
  <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
  <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
    <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
複製代碼

效果展現：從左至右依次爲「auto」,「fit","100px","50%"。

8.自定義option

1.添加圖標用data-icon給option添加小圖標，實現比較炫酷的效果

<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
  <option data-icon="glyphicon glyphicon-th-large">Mustard</option>
  <option data-icon="glyphicon glyphicon-home">Relish</option>
</select>
複製代碼

效果展現

若是想要獲取更多樣式可參考bootstrap官網的圖標庫，給個網址 www.runoob.com/bootstrap/b…

2.插入HTML 用data-content能夠在option中插入html元素,實現想要的效果。

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
複製代碼

效果展現

3.插入二級標題用data-subtext實現二級標題，實現提示或者其餘效果，若是要在select中也展現二級標題,要在初始化selectpicker時要設置showSubtext爲true。

<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>
複製代碼

效果展現

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'showSubtext':true
             })
             
<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>
複製代碼

效果展現

9.自定義下拉菜單

1.菜單顯示項大小經過data-size屬性來限制菜單顯示的條數，好比說option有8條，咱們只展現5條,其他的經過滾動條顯示。

<select class="selectpicker" data-size="5">
    <option>apple</option>
    <option>banana</option>
    <option>group</option>
    <option>orange</option>
    <option>cherry</option>
    <option>mango</option>
    <option>pineapple</option>
    <option>lychee</option>
</select>
複製代碼

效果展現(只展現前5個，後面的能夠拖動滾動條查看)

2.全選和全不選經過設置data-actions-box="true"來添加全選和全不選的按鈕

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

固然這個按鈕的文本也是能夠自定製的只須要在初始化時設置便可

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                 'noneSelectedText':'請選擇',
                 'deselectAllText':'全不選',
                 'selectAllText': '全選',
             })
複製代碼

效果展現

3.添加數據分割線設置data-divider="true"添加數據分割線。

<select class="selectpicker" data-size="5">
  <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
  <option data-divider="true"></option>
   <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
</select>
複製代碼

效果展現

4.添加菜單頭用data-header爲下拉菜單設置菜單頭

<select class="selectpicker" data-header="Select a condiment">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

複製代碼

效果展現

5.設置菜單的上浮或者下浮經過設置 dropupAuto來設置菜單的上下浮動， dropupAuto默認爲true，自動肯定是否應顯示的菜單上面或下面的選擇框，若是設置爲false，系統會加入一個 dropup樣式的上拉框。

$('.selectpicker').selectpicker({
                'selectedText':'cat',                   
                 'dropupAuto':false
             })

<select class="selectpicker dropup">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

10.不可用

在對應的控件上加入disabled便可實現 1.設置select不可用這裏select按鈕失效，不能點擊

<select class="selectpicker" disabled>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

2.設置option不可用這裏option設置屬性爲disabled的將沒法選中

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>
複製代碼

效果展現

3.設置optiongroup不可用這裏是一個optiongroup將沒法選中

<select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>
複製代碼

效果展現

總結

好的，這裏咱們基本上把官方的應用示例解讀完畢，固然若是有疑問能夠本身親自去驗證或者諮詢博主，想實現本身想要的效果就要多加摸索和實踐，只要明白其中的規則就能舉一反三了。第一篇關於bootstrap-select的官方示例文檔的解讀，若是想了解更多bootstrap-select的用法，能夠關注我後面的博客哦。