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 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
微信小程序实现时间进度条功能
Nov 17 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
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
javascript实现时钟动画
2020/12/03 Javascript
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python类型转换的魔术方法详解
2020/12/23 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
银行求职推荐信范文
2013/11/30 职场文书
环保建议书400字
2014/05/14 职场文书
体育教师求职信
2014/06/30 职场文书
旷工辞退通知书
2015/04/17 职场文书
2015年工程部工作总结
2015/04/30 职场文书