BootStrap selectpicker


Posted in Javascript onJune 20, 2016

mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用

$('.selectpicker').selectpicker('val', 'Mustard');//单选
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示

mark一下问题:设置的val必须为option里面的value值,如果用name怎不生效。

PS:select 美化(bootstrap)

需要引入的文件:

bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js

以及bootstrap.min.js等几个常用的bootstarp文件

实现:

1、 在<select>标签中添加class或者id,建议添加class,因为class可以重复;

2、 在js文件中添加初始化方法:

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}

在外部初始化的时候调用该方法就ok!

下图是美化后的:不是很好看,但是自己觉得比之前强多了!

BootStrap selectpicker

但是这种美化插件有几个问题:

其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<select>将取法显示,我觉得应该是这样: bootstrap-select.js中把没有option的<select>显示'请输入',这样的话动态赋值的option就写不进去了!如果能把noneSelectedText:'请选择' 进行修复,那么这个问题应该是可以解决的!

经过几个小时的研究,发现了问题所在,但是只是解决了其中的一个;

在js中调用的时候,一定要等也面上的select 中的option加载完成之后再调

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}

这样就可以把动态的select赋值也能美化了,但是任然存在一个问题:不是页面上的每一个select都能在页面初始化的时候全部加载的,比如:现在有两个联动的select,也就是第二个select的option要随第一个变化,在js中添加监控onchange或者change;如果这样美化就有问题了!

以上所述是小编给大家介绍的BootStrap selectpicker的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
JS排序之选择排序详解
Apr 08 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 #Javascript
JS作为值的函数用法示例
Jun 20 #Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 #Javascript
JS事件添加和移出的兼容写法示例
Jun 20 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JS 常用校验函数
2009/03/26 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
BootStrap表单验证实例代码
2017/01/13 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
python中温度单位转换的实例方法
2020/12/27 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
员工培训邀请函
2014/02/02 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
python requests模块的使用示例
2021/04/07 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android