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

由于之前使用的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>

OK,搞定，就是这么简单

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

html 输入框联动显示,js下拉选择框与输入框联动实现添加选中值到输入框的方法...
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧 ...
下拉选择框插件chosen
写在前面本文介绍下拉选择框插件chosen的使用,参考这里而成. 1:下载在这里下载. 2:使用 2.1:引入 <link rel="stylesheet" type=& ...
js下拉 selenium_selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板基础项目源码下载地址为: SpringMV ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
微信小程序下拉选择框
一般来说的话,总有点需要下拉并且能够搜索选择的需求. 首先wxml <view class='menu-po'>& ...
下拉选择框、弹出框、滚动条操作
目标 1. 掌握下拉选择框的操作方法 2. 掌握处理弹出框的方法 3. 掌握调用JavaScript方法 1. 下拉选择框操作说明:下拉框就是HTML中<select>元素: 1.1 如 ...
微信小程序自定义下拉选择框与分页加载--自用【随笔】
效果图展示下拉加载上拉加载编码实现 wxml  <view><vie ...

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

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

最新文章

热门文章