[译]bootstrap-select (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模式下的所有选项。
$('.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)方法的更多相关文章
- Bootstrap-风格的下拉按框:Bootstrap Select
Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- jq bootstrap select 点击不能动弹
jq bootstrap select 点击不能动弹 因为是样式selectpicker 冲突. 解决办法换 样式 form-control <select name="ty ...
- bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)
如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...
- 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...
- bootstrap中selectpicker下拉框使用方法实例
最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接, ...
随机推荐
- java:给图片上加水印
import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.Buff ...
- vue-devtools chrome 开发工具
1.github下载地址:https://github.com/vuejs/vue-devtools 有Git的同学直接 Git clone https://github.com/vuejs/vue- ...
- (JAVA保留小数问题,基础)Probability hdu2131
Probability 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2131 Time Limit: 3000/1000 MS (Java/Others) ...
- 求矩形面积(问题来自PythonTip)
描述: 已知矩形长a,宽b,输出其面积和周长,面积和周长以一个空格隔开. 例如:a = 3, b = 8 则输出:24 22 方法一: a=int(input('')) //input返回的是字符串类 ...
- WCF开发实战系列五:创建WCF客户端程序
WCF开发实战系列五:创建WCF客户端程序 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 在前面的三篇文章中我们分别介绍了WCF服务的三种载体:IIS.Self-Hos ...
- python字典遍历的几种方法
(1)遍历key值 >>> a {'} >>> for key in a: print(key+':'+a[key]) a:1 b:2 c:3 >> ...
- IoC之Spring.Net在Mvc项目中的使用
MVC中使用Spring.net 前面学习了使用Autofac来实现控制反转,这里简单记录Spring.Net实现IoC和DI的步骤 第一步:安装如下Nuget包 (Spring.Web.Mvc) i ...
- 匿名内部类中使用的外部局部变量为什么只能是final变量
被匿名内部类引用的变量会被拷贝一份到内部类的环境中 但其后,在外部,该变量如果被修改,则内部外部不一致 Java为了避免数据不同步的问题,做出了匿名内部类只可以访问final的局部变量的限制. 究其原 ...
- 腾讯云Unbuntu服务器安装桌面环境
进入命令行 1.sudo apt-get install xinit 2.sudo apt-get install gdm 3.sudo apt-get install ubuntu-desktop ...
- 02、@PropertySource指定配置文件的属性映射到JavaBean属性
零.@PropertySource 功能类似于 <context:property-placeholder location="classpath*:/config/load.prop ...