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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue使用screenfull实现全屏效果
Sep 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue 文件目录结构详解
2017/11/24 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
对python requests的content和text方法的区别详解
2018/10/11 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
迎新晚会邀请函
2014/02/01 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书