Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。

先来看下插件的效果:

 

跟这个比起来,原来的select样式是不是弱爆了!

马上来武装我们的select吧:

1、先把js和css文件引用到网页里面去:

  1. <link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" />
  2. <script type="text/javascript" src="js/jquery.1.4.4.min.js"></script>
  3. <script type="text/javascript" src="js/jqueryUI/chosen/chosen.jquery.js"></script>

2、创建一个select元素,如下:

  1. <select name="dept" style="width: 150px;" id="dept" class="dept_select">
  2. <option value="部门1">部门1</option>
  3. <option value="部门2">部门2</option>
  4. <option value="部门3">部门3</option>
  5. <option value="部门4">部门4</option>
  6. <option value="部门5">部门5</option>
  7. </select>

3、然后在js中调用Chosen定义的方法:

  1. $(function(){
  2. $('.dept_select').chosen();
  3. });

4、搞定收工,屌丝立马变成高富帅有木有~

chosen插件的一些设置项:

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字,也就是在没有选择选项的情况下,显示的文字。

  1. <select data-placeholder="选择部门" style="width:150px;" class="dept_select">
  2. <option value="-1"></option>
  3. <option value="部门1">部门1</option>
  4. <option value="部门2">部门2</option>
  5. <option value="部门3">部门3</option>
  6. <option value="部门4">部门4</option>
  7. <option value="部门5">部门5</option>
  8. </select>

这里还要注意一点,要想显示出默认文字,select下的第一个选择项必须为空的option。

2、对其方式
选项文字默认是左对齐的,可以在class属性中加入“chzn-rtl”来设置右对齐:

  1. <select data-placeholder="选择部门" class="dept_select chzn-rtl" style="width:150px;">

3、JS参数设置

在调用chosen()方法时,我们可以设置一些参数:

选项 描述
no_results_text 无搜索结果显示的文本
allow_single_deselect 是否允许取消选择
max_selected_options 当select为多选时,最多选择个数
  1. $(".some_select").chosen({
  2. /*max_selected_options: 2,*/
  3. no_results_text: "没有找到",
  4. allow_single_deselect: true
  5. });

4、事件

a) change事件:

  1. $(".dept-select").chosen().change(function(){
  2. //do something...
  3. });

b) 当我们需要动态更新select下的选择项时,该怎么办呢?只要在更新选择项后触发Chosen中的liszt:updated事件就可以了:

  1. //...$(".dept-select").html('...<option>部门6</option>...');
  2. $(".dept-select").trigger("liszt:updated");

其他问题:

1、如果不想要搜索框的话,很简单,用css把它隐藏掉就OK了:

  1. .chzn-container-single .chzn-search {
  2. display: none;
  3. }

2、做为天朝的程序猿,不得不考虑ie6和ie7下的情况。好吧,用ie6打开一看,select还是一副屌丝样!

翻看chosen.jquery.js发现在chosen方法中有如下一段,ie6和ie7直接返回select对象本身:

  1. if ($.browser.msie && ($.browser.version === "6.0" || ($.browser.version === "7.0" && document.documentMode === 7))) {
  2. return this;
  3. }

把这段js注释掉,重新打开ie6和7,不再屌丝了有木有!虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

终于能高高兴兴地在ie6使用了,尼玛过了会又发现问题了,还是坑爹的ie6和7!如果2个select在一起又不和谐了,请看:

点开选择部门,尼玛这是闹哪样!见图:

好吧,这应该是z-index的问题,把css修改下,结果各种div各种z-index改到吐血还是这副死样子。

最后没办法了,想了个笨办法,动态改变所有chzn-container的z-index,在点击select的时候让当前container的z-index最高,让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法:

  1. Chosen.prototype.activate_field = function() {
  2. this.container.addClass("chzn-container-active");
  3. this.active_field = true;
  4. this.search_field.val(this.search_field.val());
  5. return this.search_field.focus();
  6. };

将此方法改为:

  1. Chosen.prototype.activate_field = function() {
  2. this.container.addClass("chzn-container-active");
  3. this.active_field = true;
  4. this.search_field.val(this.search_field.val());
  5. var zindex = 1010;
  6. this.container.css('z-index','1010')
  7. $('.chzn-container').not(this.container).css('z-index',--zindex);
  8. return this.search_field.focus();
  9. };

当然,你也可以在生成.chzn-container的时候按顺序赋予不同的z-index,这样就可以不用每次点击select都要重新设一遍了。

至此,ie6和ie7下使用Chosen基本没什么问题了。。。

[jQueryUI] – Chosen:select下拉选择框美化插件及问题的更多相关文章

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

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  2. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  3. 类似select下拉选择框同时又支持手动输入的元素 datalist 介绍。

    有时候我们会有这样的需求,通过使用下拉菜单给用户一定的选择范围,同时又可以使用户在找不到选择项的时候手动输入.这个时候我们就需要用到html5的datalist属性了. datalist包含<o ...

  4. jsp页面数据回显(select下拉选择框)

    1.静态变量方式: <!-- 实现select标签回显 --> 1.<select name="curStatus" value="${curStatu ...

  5. layui下拉选择框select不显示

    弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...

  6. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  7. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  8. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  9. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

随机推荐

  1. radiobutton以及checkbox背景图片拉伸变形的问题

    设置RadioButton的text属性,只需要有这个属性就可以(设置“”内容就行),然后再添加textsize属性,将字体大小属性值设置为比较小,我设置为2sp.运行后我们会发现图片变形问题不复存在 ...

  2. www.iis.net

    http://www.iis.net 这是一个神奇的网站 关于IIS的所有管理,在这里都能找到 今天,一个同事问我,  iis8 php的设置,一个环境变量的东西不知道怎么去设置, 然后我搜了下,在 ...

  3. DOM操作-克隆元素

    代码: ———————————————————————————— <script type="text/javascript">            //克隆元素   ...

  4. js 放大镜用法bug解决

    <img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /> ...

  5. static静态初始化块

    Java 中可以通过初始化块进行数据赋值.如: 在类的声明中,可以包含多个初始化块,当创建类的实例时,就会依次执行这些代码块.如果使用 static 修饰初始化块,就称为静态初始化块. 需要特别注意: ...

  6. debian上安装lua编辑器

    Debian服务器上安装lua 1)下载压缩包 wget http://www.lua.org/ftp/lua-5.1.4.tar.gz 2)解压文件 tar  zxvf lua-5.1.4.tar. ...

  7. Entity Framework技巧系列之十二 - Tip 46 - 50

    提示46. 怎样使用Code-Only排除一个属性  这次是一个真正简单的问题,由StackOverflow上这个问题引出.  问题:  当我们使用Code-Only把一个类的信息告诉Entity F ...

  8. insertRule()与addRule()创建规则

    要向现有的样式表中添加新规则,需要使用insertRule()方法.这个方法接受两个参数:规则文本和表示在那里插入规则的索引.下面是一个例子: sheet.insertRule("body ...

  9. build path contains duplicate entry:'src' for project 'XXX'

    解决了,原因是编译器配置不正确,原工程使用adk8/android2.3,我用的是最新的4.0,改了下编译环境就好了.

  10. eclipse添加桌面快捷方式

    linuxmint系统 输入sudogedit /usr/share/applications/eclipse.desktop,在打开的文件中输入以下参数: [Desktop Entry] Encod ...