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 tools系列 expose 学习
Sep 06 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
几种显示数据的方法的比较
2006/10/09 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python根据路径导入模块的方法
2014/09/30 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python网页解析器使用实例详解
2020/05/30 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
企业员工集体活动方案
2014/08/17 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers