1、chosen插件使用
chosen插件依赖于jQuery库或prototype，使用之前要先引入jQuery或prototype。
引入jquery插件和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)。可以把selector写成样式类，这样执行完chosen函数后，只要加上样式类就可以了。
举例
<head> <meta charset="utf-8"> <link href='https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css' rel='stylesheet'/> <style> .w-country{width:100px;} </style> <script src='https://code.jquery.com/jquery-1.9.0.js'></script> <script src='https://cdn.bootcss.com/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"> <option value