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,搞定,就是这么简单
相关资料分享
详细的参数及过程可参考博文http://blog.csdn.net/iamduoluo/article/details/11519909
不设置的话,搜索框将从首字母开始匹配,要实现模糊查询,可参考博文http://blog.csdn.net/mengtianyalll/article/details/43966089
jquery.chosen.js下拉选择框美化插件项目实例的更多相关文章
- [jQueryUI] – Chosen:select下拉选择框美化插件及问题
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- CSS3不一样的下拉选择框
本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...
- combobox级联检索下拉选择框
1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...
- layui下拉选择框select不显示
弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
随机推荐
- git别名
git config --global alias.lg 'log --oneline --all --graph --decorate'
- java-mybaits-00301-SqlMapConfig
1.配置内容 mybatis的全局配置文件SqlMapConfig.xml,SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) t ...
- PAT 1069 The Black Hole of Numbers[简单]
1069 The Black Hole of Numbers(20 分) For any 4-digit integer except the ones with all the digits bei ...
- EasyUI合并行
扩展一下 EasyUI 下面湿扩展EasyUI 合并行的方法 $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fie ...
- java反射子之获取方法信息(二)
一.获取方法 1.方法作用. 2. 二.获取方法信息.(修饰符,返回值,方法名称,参数列表,抛出的异常). ############################################## ...
- Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) C - Jon Snow and his Favourite Number
地址:http://codeforces.com/contest/768/problem/C 题目: C. Jon Snow and his Favourite Number time limit p ...
- HDU 4746 Mophues(莫比乌斯反演)
题意:求\(1\leq i \leq N,1\leq j \leq M,gcd(i,j)\)的质因子个于等于p的对数. 分析:加上了对质因子个数的限制. 设\(f(d):[gcd(i,j)=d]\) ...
- LVM2逻辑卷创建及扩容
LVM是Logical Volume Manager(逻辑卷管理器)的简写,又译为逻辑卷宗管理器.逻辑扇区管理器.逻辑磁盘管理器.是Linux核心所提供的逻辑卷管理(Logical Volume Ma ...
- java中hashSet原理
转自: http://blog.csdn.net/guoweimelon/article/details/50804799 HashSet是JavaMap类型的集合类中最常使用的,本文基于Java1. ...
- 超级强大的vim配置(vimplus)--续集
An automatic configuration program for vim 安装(github地址:https://github.com/chxuan/vimplus.git, 欢迎star ...