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