bootstrap-select 的多選+模糊查詢下拉框詳解(官方示例文件解讀)
引入問題
之前博主在實際開發中遇到了一個問題,就是需要既支援多選又同時支援模糊查詢的下拉控制元件,大家所熟知的比較強大的下拉框外掛bootstrap-select2,博主當時也參考過,但是發現它的多選效果做的比較差,類似這種,
這樣的多選控制元件必須要控制元件足夠長,如果選擇超過一定限制就會出現樣式崩潰,你懂的~後面我無意中發現了bootstrap-select外掛,瞬間發現它很高大上呀!它即可以支援單選,又支援多選,最厲害的是竟然還自帶模糊查詢功能!先給大家展示下炫酷的效果吧:
這樣的控制元件不用真是可惜了,後面博主找了很多文件和部落格參考,但是發現很多都沒有寫清楚具體的用法,只是簡單的擺一個例子,並沒有太大的參考價值,博主通過研究官網的相關文件以及結合自身開發經驗,把bootstrap-select的用法做一個清晰的梳理,供大家參考。
官方外掛地址:
Github地址: https://github.com/silviomoreto/bootstrap-select
應用示例(參考官方文件Basic examples)
1.單選
- 簡單單選
選中預設是沒有“√”的。
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option >
</select>
效果展示
- 分組單選
注意加入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>
效果展示
2.多選框
相比於單選框加入了一個multiple
標籤
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
3.模糊查詢
新增一個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"
或者在初始化時用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>
效果展示
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的用法,可以關注我後面的部落格哦。
相關推薦
bootstrap-select 的多選+模糊查詢下拉框詳解(官方示例文件解讀)
引入問題 之前博主在實際開發中遇到了一個問題,就是需要既支援多選又同時支援模糊查詢的下拉控制元件,大家所熟知的比較強大的下拉框外掛bootstrap-select2,博主當時也參考過,但是發現它的多選效果做的比較差,類似這種, 這樣的多選控制元件必須要控
【bootstrap】多選可搜尋下拉框
1.引入必要檔案 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
spring mvc:常用標簽庫(文本框,密碼框,文本域,復選框,單選按鈕,下拉框隱藏於,上傳文件等)
標簽庫 state -h ring lib ati gap 下拉列表 hiberna 在jsp頁面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>標簽. 文
bootstrap-select 通過拼音搜尋漢字下拉框方法
其實就是 在 option 中新增 data-tokens 引數 就可以實現這個功能了 <select id="tokens" class="selectpicker form-c
selenium3 select下拉框詳解
用法 val ble find .com ima 設置 索引 -c 以"百度首頁"->"設置"->"搜索設置"為例介紹Select方法多種用法 法一:直接定位列表框中元素,如:選擇”每頁顯示20 條”driver.find_element_by_css_se
微信小程式如何實現下拉框效果?(程式碼示例)
wxml程式碼: <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <
Bootstrap-select多選下拉框實現
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootst
Bootstrap select多選下拉框賦值
Bootstrap Multi-Select Plugin的動態資料插入使用 圖片: 這個你看到的是我頁面的效果,我將裡面的js程式碼修改了一點,擴充套件了一下顯示的結果id,text,這是固定的,後面的是我又加了一個引數 參考頁面:多選框外掛連結(這個就是那個多選的
bootstrap select多選
div live 初中 cte 頁面效果 arch selected ive tar 1、頁面效果 <div class="form-group"> <div class="col-md-2 control-label"><lab
Django bootstrap-select 多選框顯示以及回顯
sel i++ ctp pty edi val sele 多選 pic 初始化 function showUserList(param) { $.ajax({ url: "user/detail/0/", type: ‘get‘,
bootstrap select 多選的用法,取值和賦值(取消預設選擇第一個的對勾)
h5自帶的select標籤可以實現按住ctrl鍵多選的功能,但是樣式及其難看。 bootstrap select是很好用的前端外掛 首先引入bootstrap和bootstrap-select的css和js <link rel="stylesheet" h
判斷select下拉框是否有選,並給下拉框賦值
使用select下拉框時,錯誤寫法 var sex = $('#sex').val(); alert(sex); //彈出的是:null if(sex==""){ alert(
BootDo框架中使用bootstrap設定多個按鈕的下拉按鈕
直接進入對應的列表頁面的js: 這裡面我利用bootdo設定了許可權,根據許可權顯示不同的按鈕,同時我需要在外面顯示一個按鈕,倒三角內顯示下拉按鈕; { title: '操作', field: 'id', align
詳細的<select>下拉列表詳解
刷新 焦點 root 失去 收集 asc aid isa document 我們使用表單下拉列表選擇數據,如省、市、縣、年、月等數據,我們即可使用下拉菜單表單進行設置。select 我下拉列表菜單標簽Option為下拉列表數據標簽Value 為Option的數據值(用於數據
angularjs 綁定多個屬性到下拉框
切換 bsp num ber type 普通 var .ajax activit 綁定下拉框 angularjs 代碼: //活動下拉切換 $scope.activityChange = function () {
給select標簽設置下拉框高度
gpo alt aud 高度 style blur es2017 image 下拉 最近的需求涉及有下拉框,突然想到如果下拉選項過多的話可能要對下拉框的高度做一下限制,查了一下select標簽,有size這個屬性,原以為可以實現。 <!DOCTYPE html&
bootstrap如何讓dropdown menu按鈕式下拉框寬度一致
CA 容器 str ret ogg 長度 下拉 如何 min-width 按鈕和菜單需要包裹在.dropdown 的容器裏,而作為被點擊的元素按鈕需要設置 data-toggle="dropdown"才能有效。對於菜單部分,設置 class="dropdown-menu"才
使用ajax從資料庫動態載入下拉框(select)資料,可編輯下拉框。
<div style="position:relative;"> <span style="margin-left:100px;width:18px;overflow:hidden;"> <select id="ch
select動態新增option與動態設定下拉框預設選項(selected)的問題(原創)
//動態生成下拉框$.ajax({ type:"GET", async:false, //設為同步請求(非同步載入的話後面的遍歷方法獲取不到option) url:context+"/service/demo/hfjd/findJdmc",//獲取
微信瀏覽器禁止頁面下拉查看網址(不影響頁面內部scroll)
完美解決 comm -i con js代碼 uil from () -c 此類事件是手機touchmove默認事件行為,可以通過js代碼隱藏事件: $(‘body’).on(‘touchmove’, function (ev