1. 程式人生 > >外掛:bootstrap-select 下拉選項列表 的使用學習筆記

外掛:bootstrap-select 下拉選項列表 的使用學習筆記

https://github.com/silviomoreto/bootstrap-select/ 

1)html檔案引用bootstrap、jquery、bootstrap-select的css和js檔案

2)bootstrap-select/blob/master/docs/docs/examples.md

常規選項加上class="selectpicker"

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

3)bootstrap-select/blob/master/docs/docs/methods.md

ajax動態獲取options選項後,需要refresh重新整理頁面才可以顯示出來options

.selectpicker('refresh')

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

$('.selectpicker').selectpicker('refresh');

4)bootstrap-select/blob/master/docs/docs/options.md

改變選項時觸發的事件:

changed.bs.select This event fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue.
$('#mySelect').on('hidden.bs.select', function (e) {
  // do something...
});