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函数整理
Oct 25 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
angular中的cookie读写方法
Aug 02 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
代码详解JS操作剪贴板
2018/02/11 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
详解重置Django migration的常见方式
2019/02/15 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
品牌推广活动策划方案
2014/08/19 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
优秀教师个人总结
2015/02/11 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
HTML基础详解(上)
2021/10/16 HTML / CSS