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高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
javascript操作ul中li的方法
May 14 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
PHP实现多条件查询实例代码
2010/07/17 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
document.compatMode介绍
2009/05/21 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
js实现滑动滑块验证登录
2020/07/24 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python list多级排序知识点总结
2019/10/23 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
最新党员思想汇报
2014/01/01 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
老师对学生的寄语
2014/04/09 职场文书
个人安全承诺书
2014/05/22 职场文书
小学捐书活动总结
2014/07/05 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Python实现双向链表基本操作
2022/05/25 Python