bootstrap-multiselect.js如何动态更新select里的数据

在使用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
			});
		}
	});
}