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插件
Feb 24 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
vue无限轮播插件代码实例
May 10 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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 全文搜索和替换的实现代码
2008/07/29 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
浅析php工厂模式
2014/11/25 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
React中的render何时执行过程
2018/04/13 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python实现图书借阅系统
2019/02/20 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
如何提高python 中for循环的效率
2020/04/15 Python
Python实现代码块儿折叠
2020/04/15 Python
python3中数组逆序输出方法
2020/12/01 Python
工程质量月活动方案
2014/02/19 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
保密工作整改报告
2014/11/06 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
实习感想范文
2015/08/10 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
ICOM R71E和R72E图文对比解说
2022/04/07 无线电