BootStrap selectpicker

 更新时间:2016年06月20日 14:07:05   作者:gised  
这篇文章主要介绍了BootStrap selectpicker 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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!

下图是美化后的:不是很好看,但是自己觉得比之前强多了!

但是这种美化插件有几个问题:

其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<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的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 小程序实现点击动画效果

    小程序实现点击动画效果

    这篇文章主要为大家详细介绍了小程序实现点击动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 15个高级前端开发小技巧总结分享

    15个高级前端开发小技巧总结分享

    这篇文章主要介绍了15种不依赖JavaScript的高级Web开发技术,涵盖了从响应式排版到图像延迟加载的各个方面,展示了现代HTML和CSS的强大功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • JSON键值对序列化和反序列化解析

    JSON键值对序列化和反序列化解析

    这篇文章主要介绍了JSON键值对序列化和反序列化知识,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • ES6中参数的默认值语法介绍

    ES6中参数的默认值语法介绍

    这ES6允许为函数参数设置默认值,即直接写在参数定义后面。下面篇文章主要介绍了ES6中参数默认值语法的相关资料,对大家具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-05-05
  • 用表格输出1-1000之间的数字实现代码(附特效)

    用表格输出1-1000之间的数字实现代码(附特效)

    本文将介绍下用表格输出1-1000之间的数字同时附有特效,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • 使用JS 清空File控件的路径值

    使用JS 清空File控件的路径值

    今天Test时发现一个小问题,上传控件完成后,路径还保留,为了清除,需要想一些办法
    2013-07-07
  • 解javascript 混淆加密收藏

    解javascript 混淆加密收藏

    今天硬着头皮去搞一段混淆过的js代码,因为源码丢了。。。 本来打算要在js引擎那一层去获取代码的,发现根本不需要。
    2009-01-01
  • js跨域的几种解决方案

    js跨域的几种解决方案

    本文主要介绍了js跨域的几种解决方案,主要介绍了8种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • JS面试高频单线程与事件循环深入解析

    JS面试高频单线程与事件循环深入解析

    JavaScript是一种单线程语言,它在任何给定时间只能执行一个任务,然而js确能够处理异步操作,这得益于其事件循环(Event Loop)机制,今天这篇文章带领大家深入理解JavaScript单线程特性,以及讲解事件循环和js多线程知识
    2023-10-10
  • js实现的Easy Tabs选项卡用法实例

    js实现的Easy Tabs选项卡用法实例

    这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论