源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

BootStrap selectpicker

  • 时间:2021-01-02 15:24 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:BootStrap selectpicker
mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用
$('.selectpicker').selectpicker('val', 'Mustard');//单选
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示 
mark一下问题:设置的val必须为option里面的value值,如果用name怎不生效。 [b]PS:select 美化(bootstrap) [/b] 需要引入的文件: 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! 下图是美化后的:不是很好看,但是自己觉得比之前强多了! [img]http://files.jb51.net/file_images/article/201606/2016062014105533.gif[/img] 但是这种美化插件有几个问题: 其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<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的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部