bootstrap-select——Methods

参考资料：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');