關于jq chosen的使用心得

jQuery Chosen 使用

1. html代碼

單選
<select class="" data-placeholder="請選擇"  id="enterpriseId"></select>

多選
<select class="" data-placeholder="請選擇" multiple  id="userName"></select>
           

1. 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為多選時，最多選擇個數
});
    
           

1. 動态渲染下拉資料時

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();
           

1. change事件

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