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