[譯]bootstrap-select (selectpicker)方法

方法

---

.selectpicker('val')

您可以通過調用val元素上的方法來設置所選值。

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);　

這不同於val()直接在select元素上調用。如果val()直接調用元素， bootstrap-select ui將不會刷新（因為只從用戶交互時觸發事件）。你必須自己調用ui刷新方法。

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');

// this is the equivalent of the above
$('.selectpicker').selectpicker('val', 'Mustard'); 

.selectpicker('selectAll')

這將選擇在multi-select模式下的所有選項。

$('.selectpicker').selectpicker('selectAll'); 　

.selectpicker('deselectAll')

這將取消選擇在multi-select模式下的所有選項。

$('.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')

修改與按鈕本身或其容器相關聯的類。

如果更換容器上的類：

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');　

如果更改按鈕上的類（更改數據樣式）：

// 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');
<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')

以編程方式隱藏bootstrap-select使用hide方法（這僅影響bootstrap-select自身的可見性）。

$('.selectpicker').selectpicker('hide');

.selectpicker('show')

以編程方式顯示bootstrap-select使用show方法（這僅影響引導選項本身的可見性）。

$('.selectpicker').selectpicker('show'); 

.selectpicker('destroy')

要以編程方式銷毀bootstrap-select，請使用該destroy方法。

$('.selectpicker').selectpicker('destroy');

---

Link: http://silviomoreto.github.io/bootstrap-select/methods/