DDR爱好者之家

BootStrap selectpicker
站长资源 2025/1/17 佚名
24 1538
DDR爱好者之家 Design By 杰米

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的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米