简介

Chosen 是一款JQuery下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！

使用

1.  引入 jquery.js 、chosen.css 和 chosen.jquery.js 文件

2.  HTML

<!-- single dropdown -->
<select style="width:200px;">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>

<!-- multiple dropdown -->
<select multiple="true" style="width:400px;">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option selected="selected">Dojo Toolkit</option>
</select>

3.  调用

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".chosen").chosen();
});
</script>

更多说明

1）如何设置模拟选择框的默认文本？

jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();

2）如何设置没有搜索结果时显示的文本？

$(".chzn-select").chosen({no_results_text: "没有匹配结果"});

3）如何给选项分组？

<select data-placeholder="Your Favorite Football Teams" style="width:350px;" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>ziladelphia Eagles</option>
<option>Washington Redskins</option>
<optgroup>
<optgroup label="NFC NORTH">
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
</optgroup>
</optgroup>
</select>

4）如何开启多选支持？

<select data-placeholder="Choose a Country" multiple style="width:350px;" tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>

5）如果将此下拉表单的高度修改，需要修改CSS。

相关链接

官网地址 ：https://davidwalsh.name/jquery-chosen

参数说明 ：https://harvesthq.github.io/chosen/options.html

GitHub 地址：https://github.com/components/chosen