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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
2014公司年终工作总结
2014/12/19 职场文书
员工加薪申请报告
2015/05/15 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Django框架之路由用法
2022/06/10 Python