方法


.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模式下的所有选项。

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

[译]bootstrap-select (selectpicker)方法的更多相关文章

  1. Bootstrap-风格的下拉按框:Bootstrap Select

    Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...

  2. 转载 JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...

  3. jq bootstrap select 点击不能动弹

    jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="ty ...

  4. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  5. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)

    如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...

  6. 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...

  7. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  8. bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...

  9. bootstrap中selectpicker下拉框使用方法实例

    最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接, ...

随机推荐

  1. 【洛谷P1273】有线电视网

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,叶子节点有点权,每条边有边权,每经过一条边都减去该边权,每经过一个节点都加上该点权,求在保证权值和为非负数的前提下最多能经过多少个叶子节点. ...

  2. 线程的中断.interrupt

    线程对象.interrupt() 注意,异常分析中要有break,否则无法中断 public class Demo extends JFrame { private Thread thread;//定 ...

  3. ModuleNotFoundError: No module named 'Crypto.Cipher'

    ModuleNotFoundError: No module named 'Crypto.Cipher'报错问题 原因及处理: 在使用python3是经常会用到import一个第三方库,但是有时候会提 ...

  4. SQL Server 2012/2016/2017 新增函数

    /************************************************************** SQL Server 2012 新增的函数 ************** ...

  5. 远程客户端连接MysqL数据库太慢解决方案

    远程客户端连接MysqL数据库太慢解决方案局域网客户端访问mysql 连接慢问题解决. cd /etc/mysql vi my.conf [mysqld] skip-name-resolve 此选项禁 ...

  6. 一、linux IO 编程---内存管理

    1.1 进程在虚拟空间中的布局 32位的操作系统虚拟空间的大小为 4GB,即每个进程在系统中分配的虚拟空间大小为4GB.这4GB的大小被分为了两个部分: 内核空间:1GB,内核起的进程 用户空间:3G ...

  7. js 获取属性名称

    $(function ()        {            myfun();        })        function myfun()        {            var ...

  8. string字符串js操作

    String 对象方法 方法 描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. bold() 使用粗体显示字符串. charAt() ...

  9. Android NetworkInterface 的 name

    user@android:/$ ls /sys/class/net/ dummy0 lo p2p0 rev_rmnet0 rev_rmnet1 rev_rmnet2 rev_rmnet3 rmnet0 ...

  10. Android判断当前是否在主线程

    Android开发中, 有时需要判断当前线程到底是主线程, 还是子线程, 例如: 我们在自定义View时, 想要让View重绘, 需要先判断当前线程到底是不是主线程, 然后根据判断结果来决定到底是调用 ...