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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
Javascript节点关系实例分析
May 15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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将任何格式视频转为flv的代码
2009/09/03 PHP
php生成rss类用法实例
2015/04/14 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python3实现字符串操作的实例代码
2019/04/16 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python解析yaml文件过程详解
2019/08/30 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
银行职员个人的工作自我评价
2014/02/15 职场文书
战友聚会策划方案
2014/06/13 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
物流管理专业推荐信
2014/09/06 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
幼儿园见习报告
2014/10/30 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Sql Server之数据类型详解
2022/02/28 SQL Server
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
Fluentd搭建日志收集服务
2022/09/23 Servers