boostrap selectpicker 用法

最新推荐文章于 2021-08-06 18:37:47 发布

原创最新推荐文章于 2021-08-06 18:37:47 发布 · 367 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

收录于

bootstrap

本文详细介绍了Bootstrap Selectpicker的各种方法，包括设置所选值、选择所有选项、取消选择所有选项、重新渲染、检测手机设备、修改样式、更新状态、切换菜单、隐藏与显示组件以及销毁组件。这些方法为开发者提供了强大的工具，用于处理和定制Select元素。

.selectpicker('val')

您可以通过调用val元素上的方法来设置所选值。

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

这不同于val()直接在select元素上调用。如果val()直接调用元素， bootstrap-select ui将不会刷新（因为只从用户交互时触发事件）。你必须自己调用ui刷新方法。

1

2

3

4

5

$('.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')，是的手机可以滚动选项。这将启用手机的原生菜单以进行选择页面上的菜单。

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

1

2

3

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

$('.selectpicker').selectpicker('mobile');

} 　

.selectpicker('setStyle')

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

如果更换容器上的类：

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

如果更改按钮上的类（更改数据样式）：

1

2

3

4

5

6

7

8

// 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禁用/启用选择时，这是必需的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$('.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菜单的打开/关闭。

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

.selectpicker('hide')

以编程方式隐藏bootstrap-select使用hide方法（这仅影响bootstrap-select自身的可见性）。

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

.selectpicker('show')

以编程方式显示bootstrap-select使用show方法（这仅影响引导选项本身的可见性）。

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

.selectpicker('destroy')

要以编程方式销毁bootstrap-select，请使用该destroy方法。

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。