jQuery Chosen 使用

1. html代码

单选
<select class="" data-placeholder="请选择"  id="enterpriseId"></select>

多选
<select class="" data-placeholder="请选择" multiple  id="userName"></select>

2. js代码（配置）

单选
$("#enterpriseId").chosen({
	disable_search_threshold: 10,	//当选项少等于于指定个数时禁用搜索。
	inherit_select_classes: true,	//是否继承原下拉框的样式类，此处设为继承
	no_results_text: "没有找到结果！",	//搜索无结果时显示的提示
	search_contains: true, 	 //关键字模糊搜索，设置为false，则只从开头开始匹配
	allow_single_deselect: true 	//是否允许取消选择
})

多选
$("#userName").chosen({
	disable_search_threshold: 10,	//当选项少等于于指定个数时禁用搜索。
	inherit_select_classes: true,	//是否继承原下拉框的样式类，此处设为继承
	no_results_text: "没有找到结果！",	//搜索无结果时显示的提示
	search_contains: true,   //关键字模糊搜索，设置为false，则只从开头开始匹配
	allow_single_deselect: true,	 //是否允许取消选择
	max_selected_options: 6 	//当select为多选时，最多选择个数
});
    

3. 动态渲染下拉数据时

var enterpriseArr = list;
$("#enterpriseId").html("<option value=''></option>");
for(var i=0;i<enterpriseArr.length;i++){
	$("#enterpriseId").append("<option value="+enterpriseArr[i].id+">"+enterpriseArr[i].chinese_name+"</option>");
}
$("#enterpriseId").trigger("chosen:updated");	//需要调用chosen：updated时间渲染
$("#enterpriseId").chosen();

4. change事件

$('#userName').on('change', function(e, params) {
	var val = $('#userName').val();
	console.log(val);
}