方法


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

最新文章

  1. storm源码之storm代码结构【译】【转】
  2. luagd介绍
  3. POJ2677 Tour(DP+双调欧几里得旅行商问题)
  4. Let&#39;s Encrypt这个免费的证书签发服务
  5. 谈谈.NET中常见的内存泄露问题——GC、委托事件和弱引用
  6. [geeksforgeeks] Convert a given Binary Tree to Doubly Linked List
  7. App Store审核指南(中文版)2010版
  8. struts2笔记08-初识ActionSupport
  9. Ubuntu 14.04 64bit 系统下打开PHPadmin时出现缺少mysqli|mysql 扩展的解决方法(php5)
  10. 框架整合——Spring与MyBatis框架整合
  11. udev实现热插拔
  12. java如何输入数据
  13. ch03 课下作业——缓冲区溢出漏洞实验
  14. PHP面向对象的三大特征操作——封装、继承、多态(下)
  15. 【转载】基于webpack构建react项目
  16. C++Primer第五版——习题答案详解(一)
  17. python简单实现目录对比
  18. 偏流角为什么是arcsin(w/V)
  19. WOSA/XFS PTR Form解析库—FormRule.h
  20. python SMTP 发送邮件

热门文章

  1. [HNOI2012]集合选数(构造,状态压缩,DP)
  2. [LeetCode] 1028. Recover a Tree From Preorder Traversal 从先序遍历还原二叉树
  3. Python学习笔记系列
  4. SpringBoot第三篇:配置文件详解二
  5. 如何解决github/amazonaws访问不了的问题
  6. 运维开发实践——基于Sentry搭建错误日志监控系统
  7. Prometheus 告警分配到指定接收组
  8. python3.7环境安装
  9. sql server: 数据库备份时出现-operating-system-error-5拒绝访问
  10. RabbitMQ系列(二)环境搭建