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中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js验证账户名是否重复
May 26 Javascript
javascript实现扫雷简易版
Aug 18 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魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
使用python实现省市三级菜单效果
2016/01/20 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Django Form常用功能及代码示例
2020/10/13 Python
自动一体化专业求职信
2014/03/15 职场文书
产品生产计划书
2014/05/07 职场文书
法人授权委托书
2014/09/16 职场文书
计划生育工作汇报
2014/10/28 职场文书
2015年商场工作总结
2015/04/27 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
运动会广播稿50字
2015/08/19 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python