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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
纯js实现倒计时功能
Jan 06 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
详解Layer弹出层样式
Aug 21 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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 程序员应该使用的10个组件
2009/10/31 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php验证手机号码
2015/11/11 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
js实现楼层导航功能
2017/02/23 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python3.6的venv模块使用详解
2018/08/01 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Numpy数组的广播机制的实现
2020/11/03 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
酒店销售主管岗位职责
2014/01/04 职场文书
会计工作心得体会
2014/01/13 职场文书
大学新学期计划书
2014/04/28 职场文书
毕业生求职信范文
2014/06/29 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
高中家长意见怎么写
2015/06/03 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python