bootstrap-select中多選和模糊查詢(xún)下拉框的示例分析

這篇文章主要介紹了bootstrap-select中多選和模糊查詢(xún)下拉框的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而B(niǎo)ootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類(lèi)型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

引入問(wèn)題

之前博主在實(shí)際開(kāi)發(fā)中遇到了一個(gè)問(wèn)題，就是需要既支持多選又同時(shí)支持模糊查詢(xún)的下拉控件，大家所熟知的比較強(qiáng)大的下拉框插件bootstrap-select2，博主當(dāng)時(shí)也參考過(guò)，但是發(fā)現(xiàn)它的多選效果做的比較差，類(lèi)似這種，

這樣的多選控件必須要控件足夠長(zhǎng)，如果選擇超過(guò)一定限制就會(huì)出現(xiàn)樣式崩潰，你懂的~后面我無(wú)意中發(fā)現(xiàn)了bootstrap-select插件，瞬間發(fā)現(xiàn)它很高大上呀！它即可以支持單選，又支持多選，最厲害的是竟然還自帶模糊查詢(xún)功能！先給大家展示下炫酷的效果吧：

這樣的控件不用真是可惜了，后面博主找了很多文檔和博客參考，但是發(fā)現(xiàn)很多都沒(méi)有寫(xiě)清楚具體的用法，只是簡(jiǎn)單的擺一個(gè)例子，并沒(méi)有太大的參考價(jià)值，博主通過(guò)研究官網(wǎng)的相關(guān)文檔以及結(jié)合自身開(kāi)發(fā)經(jīng)驗(yàn)，把bootstrap-select的用法做一個(gè)清晰的梳理，供大家參考。

官方插件地址: http://silviomoreto.github.io/bootstrap-select

Github地址:  https://github.com/silviomoreto/bootstrap-select

應(yīng)用示例（參考官方文檔Basic examples）

1.單選

• 簡(jiǎn)單單選 選中默認(rèn)是沒(méi)有“√”的。

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

• 分組單選 注意加入optgroup標(biāo)簽

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

效果展示

2.多選框

相比于單選框加入了一個(gè)multiple標(biāo)簽

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

3.模糊查詢(xún)

添加一個(gè)data-live-search="true"的屬性

<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"或者在初始化時(shí)用maxOptionsText做限制

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

或者在初始化selectpicker時(shí)設(shè)置maxOptionsText

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'maxOptionsText':2;
             })

效果展示

5.自定義按鈕的文本

通過(guò)屬性title來(lái)控制。

• 選擇框文本

<select class="selectpicker" multiple title="請(qǐng)選擇一個(gè)">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

• 選擇顯示單條文本 意思就是選中相應(yīng)的option，就展示option的title，比如選中"Burger, Shake and a Smile",文本框內(nèi)顯示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.多選框格式化選擇文本

通過(guò)屬性 data-selected-text-format 來(lái)控制選中的值的顯示 可選的值有如下4個(gè)：

1.values： 逗號(hào)分隔的選定值列表（系統(tǒng)默認(rèn)）；

2.count： 如果選擇了一個(gè)項(xiàng)，則顯示選項(xiàng)值。如果選擇多于一個(gè)，則顯示所選項(xiàng)的數(shù)量,如選擇2個(gè)，則下拉框顯示2個(gè)已被選中；

3.count > x： 當(dāng)count的值小于x時(shí)，展示逗號(hào)分隔的選定值列表;當(dāng)count>x時(shí)，顯示x個(gè)被選中；

4.static：無(wú)論選中什么，都只展示默認(rèn)的選中文本。 下面給幾個(gè)簡(jiǎn)單示例

<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.樣式選擇

• 按鈕樣式 通過(guò)data-style來(lái)設(shè)置按鈕的樣式

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

效果展示

• 單選框樣式 這里要注意一下，單選框默認(rèn)是沒(méi)有多選框的選中之后的"√"圖標(biāo)的，如果想要加上這個(gè)圖標(biāo)的話，需要在樣式中加入show-tick即可。

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

• 菜單的箭頭 Bootstrap的菜單箭頭也可以被添加進(jìn)來(lái)，需要加入樣式show-menu-arrow，個(gè)人感覺(jué)差別不大

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

效果展示

• style樣式自定義 bootstrap-select的樣式不是死的，可以自定義style樣式，類(lèi)似最基本的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屬性，來(lái)定義寬度，可選的值有以下4個(gè)auto：select的寬度由option中內(nèi)容寬度最寬的哪個(gè)決定；fit：select的寬度由實(shí)際選中的option的寬度決定；100px：select的寬度定義為100px；50%：select的寬度設(shè)置為父容器寬度的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.添加圖標(biāo) 用data-icon給option添加小圖標(biāo)，實(shí)現(xiàn)比較炫酷的效果

 <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官網(wǎng)的圖標(biāo)庫(kù)，給個(gè)網(wǎng)址www.runoob.com/bootstrap/b…

2.插入HTML 用data-content可以在option中插入html元素,實(shí)現(xiàn)想要的效果。

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

效果展示

3.插入二級(jí)標(biāo)題 用data-subtext實(shí)現(xiàn)二級(jí)標(biāo)題，實(shí)現(xiàn)提示或者其他效果，如果要在select中也展示二級(jí)標(biāo)題,要在初始化selectpicker時(shí)要設(shè)置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.菜單顯示項(xiàng)大小 通過(guò)data-size屬性來(lái)限制菜單顯示的條數(shù)，比如說(shuō)option有8條，我們只展示5條,其余的通過(guò)滾動(dòng)條顯示。

<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個(gè)，后面的可以拖動(dòng)滾動(dòng)條查看)

2.全選和全不選 通過(guò)設(shè)置data-actions-box="true"來(lái)添加全選和全不選的按鈕

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

效果展示

當(dāng)然這個(gè)按鈕的文本也是可以自定制的 只需要在初始化時(shí)設(shè)置即可

       $('.selectpicker').selectpicker({
                'selectedText':'cat',
                 'noneSelectedText':'請(qǐng)選擇',
                 'deselectAllText':'全不選',
                 'selectAllText': '全選',
             })

效果展示

3.添加數(shù)據(jù)分割線 設(shè)置data-divider="true"添加數(shù)據(jù)分割線。

<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為下拉菜單設(shè)置菜單頭

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

效果展示

5.設(shè)置菜單的上浮或者下浮 通過(guò)設(shè)置dropupAuto來(lái)設(shè)置菜單的上下浮動(dòng)，dropupAuto默認(rèn)為true，自動(dòng)確定是否應(yīng)顯示的菜單上面或下面的選擇框，如果設(shè)置為false，系統(tǒng)會(huì)加入一個(gè)dropup樣式的上拉框。

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

<select class="selectpicker dropup">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

10.不可用

在對(duì)應(yīng)的控件上加入disabled即可實(shí)現(xiàn) 1.設(shè)置select不可用 這里select按鈕失效，不能點(diǎn)擊

<select class="selectpicker" disabled>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

2.設(shè)置option不可用 這里option設(shè)置屬性為disabled的將無(wú)法選中

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

3.設(shè)置optiongroup不可用 這里是一個(gè)optiongroup將無(wú)法選中

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

效果展示

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap-select中多選和模糊查詢(xún)下拉框的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!