selectpicker的使用方法
selectpicker的使用方法
使用方法
$(’.selectpicker’)泛指select的jq对象.selectpicker(‘val’)
获取select框中所有选中的值
$('.selectpicker').selectpicker('val', 'Mustard'); $('.selectpicker').selectpicker('val', ['Mustard','Relish']);
新方当使用第二个参数时可以将 value为所输入的值的选项框默认选中
这与直接在select元素上调用val()不同。 如果直接调用元素的val() ,则引导选择ui不会刷新(因为更改事件仅从用户交互中触发)。 你将不得不自己调用ui刷新方法。
$('.selectpicker').val('Mustard');$('.selectpicker').selectpicker('val', 'Mustard');$('.selectpicker').selectpicker('render'); // this is the equivalent of the above
.selectpicker(‘selectAll’)这将选中多选中的所有项目。
$('.selectpicker').selectpicker('selectAll');
.selectpicker(‘deselectAll’) 这将取消选择多选中的所有项目。
$('.selectpicker').selectpicker('deselectAll');
.selectpicker(‘render’) 您可以使用render方法强制重新渲染引导程序 - 选择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的选择,首先操作选择,然后使用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’) 以编程方式切换开启/关闭引导程序选择菜单。
$('.selectpicker').selectpicker('toggle');
.selectpicker(‘hide’) 要以编程方式隐藏引导选择,请使用hide方法(这只会影响引导选择本身的可见性)。
$('.selectpicker').selectpicker('hide');
.selectpicker(‘show’) 要以编程方式显示bootstrap-select,请使用show方法(这只会影响引导程序选择本身的可见性)。
$('.selectpicker').selectpicker('show');
.selectpicker(‘destroy’) 要以编程方式销毁引导选择,请使用destroy方法。
$('.selectpicker').selectpicker('destroy');
selectpicker的使用方法相关推荐
- BootStrap-select插件动态添加option无法显示
问题描述: 在使用bootstrap-select插件时出现下拉框无法显示动态追加的option,经过查看element元素发现,select标签已经append进去了所需的option选项,但是页面 ...
- 在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
- Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
- 译]bootstrap-select (selectpicker)方法
方法 .selectpicker('val') 您可以通过调用val元素上的方法来设置所选值. 1 2 $('.selectpicker').selectpicker('val', 'Mustard' ...
- BootStrap selectpicker
Bootstrap Web前端CSS框架 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是 ...
- js常用字符串处理方法
function getMonth(){var date = new Date();var month=date.getMonth()+1;//当前月份$.ajax({type:"GET&q ...
- change()事件及val()/html()方法不会触发change事件
change()事件及val()/html()方法不会触发change事件 一.定义 change()函数用于为每个匹配元素的change事件绑定处理函数 当元素的值发生改变时,会发生 change ...
- Kotlin协程使用,协程使用注意事项,协程中的await方法使用|不使用suspend使用协程
参见 码云 协程使用方法一 (Dispatchers调度器模式) 指定不同线程.同线程会挂起并阻塞(挂起是不影响主线程执行,阻塞是同样的IO线程会阻塞) withContext(Dispatchers ...
- IDEA中将代码块封装为方法,IDEA代码重构快捷键
IDEA中将代码块封装为方法 选中要转换的代码块,快捷键: Windows快捷键:Alt + Shift + M Mac快捷键:Alt + Command + M 如图:
- IDEA自动生成对象所有set方法
idea中有一款插件能够生成对象所有的set方法,GenerateAllSetter :下载地址 步骤1:将下载好的压缩包放在自己记得的文件夹中,在idea中进行导入 步骤2:在本地选中刚才的压缩包, ...
最新文章
- Android对话框-下篇-之设置activity为Dialog
- java 调用启动远程shell脚本,启动spark
- Modern CSV中文版
- Towards a topological-geometrical theory of group equivariant non-expansive operators for data analy
- The connection to adb is down, and a severe error has occured.问题解决方法小结
- 数字填图问题matlab上机实验报告,数学建模实验报告数字填图问题
- Windows Server 林功能级别详解
- StoreOnce的未来:惠普是否能真正实现一体化去重
- IOS客户端Coding项目记录导航
- 增强型MOSFET导通条件
- 两个文件行合并linux,linux 两个文件合并
- java项目集成谷歌登录验证器,给网站添加谷歌验证(我不是机器人)
- 零基础如何学习SEO网站优化
- PowerBI数据处理-聚合
- windows代码设置默认音频输出设备
- 微博爬虫及简单数据分析
- 计算机应用基础试题操作题,计算机应用基础期末考试操作题.doc
- Scrapy爬虫项目的管理部署
- Hive Full Join多个表与Union All多个表
- centos7 挂载云盘
热门文章
- Excel常用技巧(一)——快捷键
- 攻防世界-CRYPTO新手区
- win7家庭版计算机管理没有本地用户和组,Win7找不到本地用户和组选项的解决方法...
- java实验报告实验环境_20165219 《Java程序设计》实验一(Java开发环境的熟悉)实验报告...
- HDFS源码解析---Balancer
- linux学习shell基础
- 传统备份 VS 云备份?
- bh1750采集流程图_基于BH1750的光照度检测)报告方案.doc
- flutter 漂亮聊天UI界面实现 flutter-chatUI-again (11)
- Jetson TK1学习(二)安装无线网卡