Chosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的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基本没什么问题了。。。
$("#xxxxId").chosen({ search_contains: true }); 即可进行模糊查询（无论英文数字还是汉字都可以）
jquery.chosen.js查询时，chosen默认从第一个字符搜索，所以写中间的字符搜索时，是搜索不出来的 若想实现中间字符的模糊查询，下面的js中（search_contains属性为true即可）可以让chosen搜索选项的中间及末尾字符 no_results_text是搜索不到内容时，显示的提示语 placeholder_text是下拉选项默认显示的文字 disable_search_threshold是select的option选项大于等于此值，才会显示查询的文本框
jQuery(".chosen").chosen({ no_results_text: "My language message.", placeholder_text : "My language message.", search_contains: true, disable_search_threshold: 10 });
或者是直接将jquery.chosen.js的源码修改了 将this.search_contains = this.options.search_contains || !1 改为this.search_contains = true || !1
最新版本 https://github.com/harvesthq/chosen/releases