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 相关文章推荐
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
JS求解两数之和算法详解
Apr 28 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
深入解析php中的foreach问题
2013/06/30 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
大学生创业感言
2014/01/25 职场文书
高二物理教学反思
2014/02/08 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
法人代表任命书范本
2014/06/05 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
英文商务邀请函范文
2015/01/31 职场文书
青年教师个人总结
2015/02/11 职场文书
导师工作推荐信
2015/03/27 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
详解MySQL中的主键与事务
2021/05/27 MySQL