select 美化(bootstrap)

最新推荐文章于 2025-06-04 09:09:49 发布

转载最新推荐文章于 2025-06-04 09:09:49 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tianhyapply/p/3620898.html

本文介绍如何使用Bootstrap Select插件美化<select>元素，并提供了一个简单易懂的示例。文章还探讨了动态赋值<select>元素的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要引入的文件：

bootstrap-combined.min.css

bootstrap-select.css

bootstrap-select.js

以及bootstrap.min.js等几个常用的bootstarp文件

实现：

1、在<select>标签中添加class或者id，建议添加class，因为class可以重复；

2、在js文件中添加初始化方法：

1    initFnc : function(){
2                 $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
3          }
4

在外部初始化的时候调用该方法就ok！

下图是美化后的：不是很好看，但是自己觉得比之前强多了！

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

其实算不上几个，只是自己觉得这个问题很棘手，在用此方法美化之后，动态赋值的<select>将取法显示，我觉得应该是这样： bootstrap-select.js中把没有option的<select>显示'请输入'，这样的话动态赋值的option就写不进去了！如果能把noneSelectedText:'请选择' 进行修复，那么这个问题应该是可以解决的！

--------------------------------------------------------------------------------------------------------------------------------------------------------------

经过几个小时的研究，发现了问题所在，但是只是解决了其中的一个；

在js中调用的时候，一定要等也面上的select 中的option加载完成之后再调

1  initFnc : function(){
2     $(".selectpicker").selectpicker({noneSelectedText:'请选择'});
3  }

这样就可以把动态的select赋值也能美化了，但是任然存在一个问题：不是页面上的每一个select都能在页面初始化的时候全部加载的，比如：现在有两个联动的select，也就是第二个select的option要随第一个变化，在js中添加监控onchange或者change；如果这样美化就有问题了！

转载于:https://www.cnblogs.com/tianhyapply/p/3620898.html