bootStrap-select中的selectpicker用法

Bootstrap Selectpicker 方法详解

最新推荐文章于 2021-04-22 08:35:54 发布

转载最新推荐文章于 2021-04-22 08:35:54 发布 · 1.8k 阅读

文章标签：

#BootStrap

前段UI 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Bootstrap 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模式下的所有选项。

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

`.selectpicker('deselectAll')`

这将取消选择在multi-select模式下的所有选项。

1	`$('.selectpicker').selectpicker('deselectAll');`

`.selectpicker('render')`

您可以强制使用该render方法重新渲染bootstrap-select ui 。如果当您编程时更改任何相关值而影响元素布局，这将非常有用。

1	`$('.selectpicker').selectpicker('render');`

`.selectpicker('mobile')`

通过$('.selectpicker').selectpicker('mobile')，是的手机可以滚动选项。这将启用手机的原生菜单以进行选择页面上的菜单。

检测浏览器的方法由用户决定。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  $('.selectpicker').selectpicker('mobile');
} 　

`.selectpicker('setStyle')`

修改与按钮本身或其容器相关联的类。

如果更换容器上的类：

1	`$('.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');
});