jquery.chosen.js下拉选择框美化插件项目实例

最新推荐文章于 2022-09-01 16:58:04 发布

转载最新推荐文章于 2022-09-01 16:58:04 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LeoBoy/p/5832960.html

本文介绍如何利用Chosen插件解决bootstrap-select在ace-admin中出现的样式冲突问题，并展示了具体的实现步骤。

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

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的，实际使用到项目中的时候，与我们使用的ace-admin（基于bootstrap）存在样式冲突，导致下拉框的样式发生变化。为了界面的美观，不得已查资料寻找另外的插件。

使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果

完成效果如下

实现步骤如下

1.导入相关文件

   <link rel="stylesheet" href="${ctxStatic}/css/chosen.css" />
    <script type="text/javascript" src="${ctxStatic}/js/chosen.jquery.min.js"></script>

2.创建select元素

<select id="customerId1" name="customer.id" class="j-chosen" data-live-search="true">
                                <option value="" maxlength="50"><font style="color: #eeeeee;">请选择客户名称</font></option>
                                <c:forEach items="${customerList}" var="customer">
                                    <option value="${customer.id}" maxlength="50" ${data.customer.id eq customer.id ? 'selected' : ''}>${customer.customerName}</option>
                                </c:forEach>
                            </select>

3.初始化

<script>
        $(function(){
            $("#customerId1").chosen(); //通过id
　　　　　　　　//$(".j-chosen").chosen();//通过class
　　　　　　　 $(".chzn-search input").css("height","25px");//设置下拉出来的搜索框的高度，一般不用设置 
　　　　　　}) 
</script>