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