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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
token 机制和实现方式
Dec 15 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 session安全问题分析
2011/06/24 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python 列表(List)操作方法详解
2014/03/11 Python
Python 加密的实例详解
2017/10/09 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python守护进程实现过程详解
2020/02/10 Python
python 实现两个npy档案合并
2020/07/01 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
师范生求职信
2014/06/14 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
举起手来观后感
2015/06/09 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android