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

先来看下插件的效果：

 

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

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

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

2、创建一个select元素，如下：

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

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

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

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

　　

chosen插件的一些设置项:

1、默认文字选项

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

?
1
2
3
4
5
6
7
8
< select  data-placeholder = "选择部门"  style = "width:150px;"  class = "dept_select" >
     < option  value = "-1" ></ option >
     < option  value = "部门1" >部门1</ option >
     < option  value = "部门2" >部门2</ option >
     < option  value = "部门3" >部门3</ option >
     < option  value = "部门4" >部门4</ option >
     < option  value = "部门5" >部门5</ option >
</ 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
2
3
4
5
$( ".some_select" ).chosen({
     /*max_selected_options: 2,*/
     no_results_text: "没有找到" ,
     allow_single_deselect: true
});

4、事件

　　a) change事件：

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

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

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

其他问题：

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

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

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

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

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

　　把这段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
2
3
4
5
6
Chosen.prototype.activate_field = function () {
     this .container.addClass( "chzn-container-active" );
     this .active_field = true ;      
     this .search_field.val( this .search_field.val());
     return  this .search_field.focus();
};

　　将此方法改为：

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

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

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

select下拉框（支持筛选、多选）相关推荐

  1. html设置下拉筛选可以多选,select下拉框（支持筛选、多选）

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

  2. ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...

    模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...

  3. Layui实现动态生成select中的option项,同时设置select下拉框选中项

    项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...

  4. 前端下拉框能支持手动输入_可输入的select下拉框

    当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项. 在输入信息项时,不改变select下拉框中原有的信息项. 通过Backspace键可以清除刚才输入的信息项, ...

  5. 判断select下拉框是否有选,并给下拉框赋值

    使用select下拉框时,错误写法 var sex = $('#sex').val(); alert(sex); //弹出的是:nullif(sex==""){alert(&quo ...

  6. vue 的elementui中select下拉框多选项-multiple属性

    vue的select下拉框多选项-multiple属性 最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...

  7. layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果

    Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...

  8. select下拉框美化

    http://dl.dbank.com/c04csxtesr 基本用法 单选下拉框的写法与传统的一样.支持TAB键打开和上下箭头选择option.支持onchange事件,见下面 选中项:2 代码如下 ...

  9. html5 下拉框 美化,纯js超酷select下拉框美化插件

    tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...

最新文章

  1. 程序员写代码崩溃，路过的暖心美团骑手：我帮你看看！
  2. Python之lambda表达式和内置函数
  3. iPhone7总不在服务区？免费网络电话可解通话烦恼
  4. 一天学完spark的Scala基础语法教程五、闭包(idea版本)
  5. 使用ABAP操作office Word文档
  6. hdu 4223 排序
  7. linux操作系统信号捕捉函数之sigaction用法小结
  8. lombok在IntelliJ IDEA下的使用
  9. StringBuffer append整数0001的问题
  10. 【编程珠玑】第四章 编写正确的程序
  11. Helm 3 完整教程（十九）：Helm 流控制结构（3）range 语句
  12. ocr tesseract_OCR引擎之战— Tesseract与Google Vision
  13. 如何把Backtrack 5安装到U盘/Backtrack 4安装方法
  14. 信息学奥赛一本通1364 二叉树遍历
  15. C语言运算符与输入输出
  16. 红米note5刷android,红米Note5 安卓9.0 解锁Bootloader-刷入第三方TWRP_Recovery 获取完整ROOT教程...
  17. linux下的etc文件夹
  18. Microsoft 365 E5 开发者扩容到5T
  19. [附源码]计算机毕业设计springboot小太阳幼儿园学生管理系统
  20. oracle数据误删怎么恢复,Oracle数据误删了怎么恢复

热门文章

  1. Word中使用交叉引用插入多个参考文献
  2. linux 路由转发 ipv6,IPv6路由
  3. 二、生理信号处理 ——1.心电信号(含Matlab代码及数据)
  4. 简单C程序示例及分析
  5. Sonya and Matrix Beauty
  6. 第三代电力电子半导体：SiC MOSFET学习笔记（四）SiC MOSFET传统驱动电路保护
  7. SOA（面向服务的架构）
  8. 敲简单前端小游戏——贪吃蛇
  9. jjava企业级开发-01
  10. 软件工程实训有必要吗_软件工程实训心得体会