在使用jQuery的bootstrap-multiselect外掛時可能會遇到一個問題

就是想要動態的去更新select裡的資料

比如我們要使一個id=select的選擇框實現多選

那麼先用ajax獲得新資料後清空select再一個個拼成option

$("#select").html("");
for (var i = 0; i < json.length; i++) {
	$("#select").append("<option value='" + json[i].code + "'>" + json[i].name + "</option>");
}

這時再重新呼叫一次multiselect()或使用multiselect("refresh")可能並沒有任何效果

正確的姿勢應該是先使用destroy破壞multiselect之後再重新構建

$("#select").multiselect("destroy").multiselect({
	// 自定義引數，按自己需求定義
	nonSelectedText : '--請選擇--', 
	maxHeight : 350, 
	includeSelectAllOption : true, 
	numberDisplayed : 5
});

最後程式碼如下

function refreshMultiSelect() {
	$.ajax({
		type : "POST",
		url : url,
		data : data,
		dataType : "json",
		success : function(json) {
			$("#select").html("");
			for (var i = 0; i < json.length; i++) {
				$("#select").append("<option value='" + json[i].code + "'>" + json[i].name + "</option>");
			}
			$("#select").multiselect("destroy").multiselect({
				// 自定義引數，按自己需求定義
				nonSelectedText : '--請選擇--', 
				maxHeight : 350, 
				includeSelectAllOption : true, 
				numberDisplayed : 5
			});
		}
	});
}