bootstrap的selectpicker的方法
2024-10-20 03:18:49
方法
.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' ); |
最新文章
- storm源码之storm代码结构【译】【转】
- luagd介绍
- POJ2677 Tour(DP+双调欧几里得旅行商问题)
- Let&#39;s Encrypt这个免费的证书签发服务
- 谈谈.NET中常见的内存泄露问题——GC、委托事件和弱引用
- [geeksforgeeks] Convert a given Binary Tree to Doubly Linked List
- App Store审核指南(中文版)2010版
- struts2笔记08-初识ActionSupport
- Ubuntu 14.04 64bit 系统下打开PHPadmin时出现缺少mysqli|mysql 扩展的解决方法(php5)
- 框架整合——Spring与MyBatis框架整合
- udev实现热插拔
- java如何输入数据
- ch03 课下作业——缓冲区溢出漏洞实验
- PHP面向对象的三大特征操作——封装、继承、多态(下)
- 【转载】基于webpack构建react项目
- C++Primer第五版——习题答案详解(一)
- python简单实现目录对比
- 偏流角为什么是arcsin(w/V)
- WOSA/XFS PTR Form解析库—FormRule.h
- python SMTP 发送邮件
热门文章
- [HNOI2012]集合选数(构造,状态压缩,DP)
- [LeetCode] 1028. Recover a Tree From Preorder Traversal 从先序遍历还原二叉树
- Python学习笔记系列
- SpringBoot第三篇:配置文件详解二
- 如何解决github/amazonaws访问不了的问题
- 运维开发实践——基于Sentry搭建错误日志监控系统
- Prometheus 告警分配到指定接收组
- python3.7环境安装
- sql server: 数据库备份时出现-operating-system-error-5拒绝访问
- RabbitMQ系列(二)环境搭建