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