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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
Angular 路由route实例代码
Jul 12 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
Vue实现选择城市功能
May 27 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+mysql 实现身份验证代码
2010/03/24 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
农村婚礼主持词
2014/03/13 职场文书
财务负责人任命书
2014/06/06 职场文书
2014年外联部工作总结
2014/11/17 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书