Bootstrap Multiselect模态框二次打开显示“未选择”异常求助

问题根源 #

每次打开模态框时，未清空下拉框的旧选项就直接追加新选项，导致下拉框存在重复option；同时未重置Bootstrap Multiselect的内部状态，引发按钮文本与实际选中状态不匹配的问题。

修正后的代码 #

function OpenProductTestingModal() {
    BindInterfaceOnProductTestingModal();
    $('#modalProductTestingInputs').modal('show');
}

function BindInterfaceOnProductTestingModal() {
    var $ddlInterface = $("#ddlInterface");
    // 清空旧选项并销毁原有multiselect实例
    $ddlInterface.empty().multiselect('destroy');

    var url = '@Url.Action("GetInterfacesForProductTesting", "EngineeringInputs")';

    $.ajax({
        type: "GET",
        url: url,
        async: false,
        success: function (res) {
            var result = res.Records;
            $.each(result, function (i, item) {
                $ddlInterface.append("<option value='" + item.OptionID + "'>" + item.OptionName + "</option>");
            });

            // 重新初始化multiselect组件
            $ddlInterface.multiselect({
                includeSelectAllOption: true
            });

            // 执行全选并更新按钮文本
            $ddlInterface.multiselect('selectAll', false);
            $ddlInterface.multiselect('updateButtonText');
        },
        error: function (err) {
            console.log(err);
        }
    });
}

关键修改点说明 #

• 清空并销毁旧实例：调用empty()清空下拉框选项，multiselect('destroy')销毁之前的组件实例，彻底清除旧状态干扰。
• 重新初始化组件：每次绑定新数据后重新初始化Multiselect，确保组件基于最新的选项构建内部状态。
• 同步全选状态：在重新初始化后执行全选和按钮文本更新操作，保证显示状态与实际选中状态一致。

额外优化建议 #

尽量避免使用async: false同步AJAX请求（会阻塞浏览器主线程），可改为异步请求并将模态框显示逻辑放在回调中：

function OpenProductTestingModal() {
    BindInterfaceOnProductTestingModal();
}

function BindInterfaceOnProductTestingModal() {
    var $ddlInterface = $("#ddlInterface");
    $ddlInterface.empty().multiselect('destroy');

    var url = '@Url.Action("GetInterfacesForProductTesting", "EngineeringInputs")';

    $.ajax({
        type: "GET",
        url: url,
        async: true,
        success: function (res) {
            var result = res.Records;
            $.each(result, function (i, item) {
                $ddlInterface.append("<option value='" + item.OptionID + "'>" + item.OptionName + "</option>");
            });

            $ddlInterface.multiselect({
                includeSelectAllOption: true
            });

            $ddlInterface.multiselect('selectAll', false);
            $ddlInterface.multiselect('updateButtonText');
            
            // 异步请求完成后再显示模态框
            $('#modalProductTestingInputs').modal('show');
        },
        error: function (err) {
            console.log(err);
        }
    });
}

内容的提问来源于stack exchange，提问作者N2J