參考資料:http://silviomoreto.github.io/bootstrap-select/methods/
Methods
.selectpicker('val'):通過呼叫元素的val方法來設定選定的值:
$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
這與直接在select元素上呼叫val()不同。如果直接呼叫元素的val(),bootstrap-select ui將不會重新整理(因為更改事件僅從使用者互動中觸發),你將不得不自己呼叫ui的重新整理方法。
$('.selectpicker').val('Mustard'); $('.selectpicker').selectpicker('render'); // this is the equivalent of the above $('.selectpicker').selectpicker('val', 'Mustard');
.selectpicker('selectAll'):在多選中選擇所有的選項。
$('.selectpicker').selectpicker('selectAll');
.selectpicker('deselectAll'):在多選中取消所有選項的選擇。
$('.selectpicker').selectpicker('deselectAll');
.selectpicker('render'):使用render方法強制渲染bootstrap-select ui.如果程式設計時更改任何影響元素佈局的相關值,這將非常有用。
$('.selectpicker').selectpicker('render');
.selectpicker('mobile'):呼叫$('.selectpicker').selectpicker('mobile')
啟動移動滾動。這將啟用裝置的原生選單進行選擇選單。
檢測瀏覽器的方法由使用者決定:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { $('.selectpicker').selectpicker('mobile'); }
.selectpicker('setStyle'):修改與按鈕本身或其容器相關的class。
如果更改容器上的class:
$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');
如果更改按鈕上的class(更改資料樣式):
// Replace Class $('.selectpicker').selectpicker('setStyle', 'btn-danger'); // Add Class $('.selectpicker').selectpicker('setStyle', 'btn-large', 'add'); // Remove Class $('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');
.selectpicker('refresh'):為了使用JavaScript以程式設計方式更新select,首先操作select,然後使用該refresh方法更新UI以匹配新狀態。對於刪除或新增選項時,或通過JavaScript禁用/啟用選擇時,這是必需的。
$('.selectpicker').selectpicker('refresh');
example:
<select class="selectpicker remove-example"> <option value="Mustard">Mustard</option> <option value="Ketchup">Ketchup</option> <option value="Relish">Relish</option> </select> <button class="btn btn-warning rm-mustard">Remove Mustard</button> <button class="btn btn-danger rm-ketchup">Remove Ketchup</button> <button class="btn btn-success rm-relish">Remove Relish</button> $('.rm-mustard').click(function () { $('.remove-example').find('[value=Mustard]').remove(); $('.remove-example').selectpicker('refresh'); }); $('.ex-disable').click(function () { $('.disable-example').prop('disabled', true); $('.disable-example').selectpicker('refresh'); }); $('.ex-enable').click(function () { $('.disable-example').prop('disabled', false); $('.disable-example').selectpicker('refresh'); });
.selectpicker('toggle'):以程式設計的方式切換bootstrap-select選單的開啟/關閉。
$('.selectpicker').selectpicker('toggle');
.selectpicker('hide'):使用hide方法以程式設計的方式隱藏bootstrap-select(這僅影響bootstrap-select自身的可見性)。
$('.selectpicker').selectpicker('hide');
.selectpicker('show'):使用show方法以程式設計的方式顯示bootstrap-select(這僅影響bootstrap-select自身的可見性)。
$('.selectpicker').selectpicker('show');
.selectpicker('destroy'):使用destory方法以程式設計的方式銷燬bootstrap-select。
$('.selectpicker').selectpicker('destroy');