Bootstrap Select（下拉框控制元件）
阿新 • • 發佈：2019-01-05
Bootstrap Select：下拉框控制元件
官方網站 http://silviomoreto.github.io/bootstrap-select/
本章完全解讀官方文件後所寫，包含樣式與事件介紹與使用。
因為CSDN文章容易樣式問題，所以我把程式碼提供出來，複製到空頁面開啟即可。
上一張效果圖：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bootstrap Select</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h1>Bootstrap Select <small>下拉框</small></h1> </div> <h3>基本select外掛效果</h3> <p>為下拉框新增外掛支援 ， <span class="label label-success">class="selectpicker"</span></p> <div class="form-group"> <select class="selectpicker"> <option>A</option> <option>B</option> <option>C</option> </select> </div> <hr> <h3>單選模式示例</h3> <p><span class="label label-success">class="selectpicker show-tick"</span> ， 選中項內容後新增" √ "小圖示</p> <p><span class="label label-success">title="請選擇一項"</span> ， 未設定預設選項並未選擇時 ， 元件框中的提示內容</p> <p><span class="label label-success">data-live-search="true"</span> ， 為元件新增查詢功能 </p> <p><span class="label label-success">data-size="5"</span> ， 設定下拉長度 </p> <div class="form-group"> <select class="selectpicker show-tick" title="請選擇一項" data-live-search="true" data-size="5"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> <option>B</option> <option>C</option> </select> </div> <hr> <h3>多選模式示例</h3> <p><span class="label label-success">title="請選擇一項"</span> ， 未設定預設選項並未選擇時 ， 元件框中的提示內容</p> <p><span class="label label-success">data-live-search="true"</span> ， 為元件新增查詢功能 </p> <p><span class="label label-success">data-size="5"</span> ， 設定下拉長度 </p> <p><span class="label label-success">multiple</span> ， 新增可多選支援 </p> <p><span class="label label-success">data-max-options="2"</span> ， 設定最多可選個數 </p> <p>該屬性在設定<span class="label label-success">data-max-options="2"</span>後 ， 建議不使用<span class="label label-default">data-actions-box="true"</span> ， 該屬性是新增"選擇所有"和"全部取消選擇"按鈕</p> <div class="form-group"> <select class="selectpicker" title="請選擇一項" data-live-search="true" data-size="5" multiple data-max-options="2"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> <option>B</option> <option>C</option> </select> </div> <hr> <h3>分組選項示例</h3> <p>使用optgroup標籤將選項分為一組， 下面介紹optgroup標籤屬性</p> <p><span class="label label-success">label="分組名"</span> ， 為分組新增名稱 </p> <p><span class="label label-success">data-subtext="追加內容"</span> ， 為分組追加名稱 </p> <div class="form-group"> <select class="selectpicker" title="請選擇" > <optgroup label="AB選項組" data-subtext="ab"> <option>A</option> <option>B</option> </optgroup> <optgroup label="CD選項組" data-subtext="ab"> <option>C</option> <option>D</option> </optgroup> </select> </div> <h3>選項標籤中屬性介紹示例1</h3> <p><span class="label label-success">title="代稱"</span> ， 改變選項在元件框中顯示內容， 相當於選項的代稱</p> <p><span class="label label-success">selected</span> ， 預設選中</p> <p><span class="label label-default">data-icon="圖示程式碼"</span>為選項前面新增小圖示， 如果沒設定 <span class="label label-success">title="代稱"</span>屬性， 那麼小圖示隨選項內容一起顯示在元件框中 </p> <p><span class="label label-success">data-subtext="提示文字"</span> ， 在選項內容後新增提示(淡灰色小2號字型)文字</p> <div class="form-group"> <select class="selectpicker" > <option title="A型別" data-icon="fa fa-file" data-subtext="a項" >A型別選項</option> <option title="B型別" data-icon="fa fa-file" selected>B型別選項</option> <option title="C型別" data-icon="fa fa-file">C型別選項</option> </select> </div> <h3>選項標籤中屬性介紹示例2</h3> <p><span class="label label-default">data-content="html程式碼"</span> ， 使用該屬性中的程式碼片段替換該選項的內容， 以及選中後在元件框中顯示的也是該html程式碼</p> <p>如果感覺顯示在元件程式碼框中的內容不好 ， 使用<span class="label label-success">title="代稱"</span> ， 改變選項在元件框中顯示內容， 相當於選項的代稱</p> <div class="form-group"> <select class="selectpicker" > <option data-content="<span class='label label-success'>A選項</span>">A選項</option> <option data-content="<span class='label label-success'>B選項</span>">B選項</option> <option data-content="<span class='label label-success'>C選項</span>">C選項</option> </select> </div> <hr> <h3>其他屬性介紹</h3> <p><span class="label label-success">disabled</span> ， 該屬性設定在元件select標籤中為禁用元件 ; 設定在分組標籤(optgroup)中禁選該組 ; 設定在選項標籤(option)中禁選該項。</p> <p><span class="label label-default">data-divider="true"</span> ， 在選項與下一選項中間新增分割線。</p> <hr> <h3>Core options(核心選項)</h3> <p>核心選項也就是一些屬性，重要的屬性已經在上面介紹完了</p> <p>寫法：data-選項名稱:對應值，組合成屬性</p> <hr> <h3>核心方法</h3> <p>$('#selectID').selectpicker('selectAll'); // 當為多選下拉框時 ，執行全部選中</p> <p>$('#selectID').selectpicker('deselectAll'); // 當為多選下拉框時 ，執行全部取消選中</p> <p>$('#selectID').selectpicker('refresh'); // 當你刪除或者新增選項時 ，重新整理程式碼</p> <p>$('#selectID').selectpicker('hide'); // 隱藏下拉框</p> <p>$('#selectID').selectpicker('show'); // 顯示下拉框</p> <hr> <h3>核心事件</h3> <p>$('#selectID').on('show.bs.select', function (e) {}); // 當點選下拉框時，選項項窗體即將顯示觸發</p> <p>$('#selectID').on('shown.bs.select', function (e) {}); // 當點選下拉框時，選項項窗體顯示觸發</p> <p>$('#selectID').on('hide.bs.select', function (e) {}); // 當點選下拉框時，選項項窗體即將隱藏觸發</p> <p>$('#selectID').on('hidden.bs.select', function (e) {}); // 當點選下拉框時，選項項窗體隱藏觸發</p> <p>$('#selectID').on('loaded.bs.select', function (e) {}); // 當下拉框被初始化後觸發</p> <p>$('#selectID').on('refreshed.bs.select', function (e) {}); // 當重新整理方法(也就是執行該方法.selectpicker('refresh'))下拉框時觸發</p> <p>$('#selectID').on('changed.bs.select', function (e) {}); // 當值被改變時觸發</p> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/i18n/defaults-zh_CN.min.js"></script> </body> </html>