1、咸犴孜稍先把js和css文件引用到网页里面去：<linkhref="js/jqueryUI/chosen/chosen.css"type="text/css"rel="stylesheet"/><scripttype="text/javascript"src="js/jquery.1.4.4.min.js"></script><scripttype="text/javascript"src="js/jqueryUI/chosen/chosen.jquery.js"></script>
2、创秃赈沙嚣建一个select元素，如下：<selectname="dept"style="width: 150px;媪青怍牙"id="dept"class="dept_select"><optionvalue="部门1">部门1</option><optionvalue="部门2">部门2</option><optionvalue="部门3">部门3</option><optionvalue="部门4">部门4</option><optionvalue="部门5">部门5</option></select>
3、然后在js中调用Chosen定义的方法：$(function(){$('.dept_select').chosen();});
4、搞定收工，屌丝立马变成高富帅有木有~
5、chosen插件的一些设置项:1、默认文字选项你可以在select元素上添加data-placeholder舛匀砖察属性定义默认文字，也就是在没有选择选项的情况下，显示的文字。<selectdata-placeholder="选择部门"style="width:150px;"class="dept_select"><optionvalue="-1"></option><optionvalue="部门1">部门1</option><optionvalue="部门2">部门2</option><optionvalue="部门3">部门3</option><optionvalue="部门4">部门4</option><optionvalue="部门5">部门5</option></select>
6、对其方式选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：<selectdata-placeholder="选择部门"class="dept_select chzn-rtl"style="width:150px;">
7、JS参数设置在调用chosen()方法时，我们可以设置一些参数：选项 ： 描述：no_results_text 无搜索结果显示的文本allow_single_deselect 是否允许取消选择max_selected_options 当select为多选时，最多选择个数$(".some_select").chosen({/*max_selected_options: 2,*/no_results_text:"没有找到",allow_single_deselect:true});
8、事件 a)change事件：$(".dept-select").chosen().change(function(){//do something...});b)当我们需要动态更新select下的选择项时，该怎么办呢？只要在更新选择项后触发Chosen中的liszt:updated事件就可以了： //...$(".dept-select").html('...<option>部门6</option>...');$(".dept-select").trigger("liszt:updated");