1、chosen插件使用chosen插件依赖于jQuery库或prototype，使用之前要先引入jQuery或prototype。 引入jquery插件和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)。可以把selector写成样式类，这样执行完chosen函数后，只要加上样式类就可以了。 举例 <head>
<meta charset='utf-8'>
<link href='https://cdn./chosen/1.5.1/chosen.min.css' rel='stylesheet'/>
<style>
.w-country{width:100px;}
</style>
<script src='https://code./jquery-1.9.0.js'></script>
<script src='https://cdn./chosen/1.5.1/chosen.jquery.js'></script>
<script>
$(function(){
$('.chosen').chosen({
no_results_text: '没有找到结果！',//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
placeholder_text_single: '选择国家', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
max_shown_results: 1000, //下拉框最大显示选项数量
display_disabled_options: false,
single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
group_search: false, //选项组是否可搜。此处搜索不可搜
include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
});
$('.chosen2').chosen({
search_contains:false,
enable_split_word_search: true //分词搜索，选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
});
});
</script>
</head>
<body>
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
<option value=''></option>
<option value='China'>中国</option>
<option value='US'>US</option>
<option value='England'>英国</option>
<option value='Canada'>加拿大</option>
<option value='Cube'>古巴</option>
</select>
<br/><br/>
<select class='chosen'>
<optgroup label='Swedish Cars'>
<option value ='volvo'>Volvo</option>
<option value ='saab'>Saab</option>
</optgroup>
<optgroup label='German Cars'>
< |
