模态框中Select2-Autocomplete无法请求BaseController问题求助

问题核心 #

普通页面中Select2自动完成功能可正常向BaseController发送请求获取数据，但在模态框内执行相同操作时，无法发起请求。

问题原因 #

1. 页面初始化时调用CallSelect2()，但此时模态框处于隐藏状态，Select2无法正确初始化模态框内的下拉元素。
2. OpenModal1()函数中重新初始化Select2时，仅设置了dropdownParent参数，覆盖了原有的AJAX配置，导致丢失了请求地址、参数等关键设置，无法发起请求。

修复方案 #

方案1：复用完整初始化逻辑 #

移除OpenModal1()中重复初始化Select2的代码，改为调用完整的CallSelect2()函数，确保模态框内的Select2拥有完整的AJAX配置：

// Product.JS 修改后的代码
function OpenModal1() {
    $('#PageModal1').modal('show').on('shown.bs.modal', function () {
        console.log("模态框已显示，调用CallSelect2");
        // 调用完整初始化函数，保留AJAX配置
        CallSelect2();
    });
}

$(function () {
    CallSelect2();
});

方案2：仅初始化模态框内的目标元素（更高效） #

如果不想重新初始化所有Select2元素，可以只针对模态框内的Select2-Autocomplete元素进行初始化，复用原有配置逻辑：

// Product.JS 修改后的代码
function OpenModal1() {
    $('#PageModal1').modal('show').on('shown.bs.modal', function () {
        console.log("模态框已显示，初始化模态框内的Select2");
        
        // 仅处理模态框内的Select2-Autocomplete元素
        $('#PageModal1 .Select2-Autocomplete').each(function () {
            var selectElement = $(this);
            var modalContent = selectElement.closest('.modal').find('.modal-content');

            selectElement.select2({
                dropdownParent: modalContent.length ? modalContent : $('body'),
                closeOnSelect: true,
                placeholder: 'Select',
                minimumInputLength: 3,
                width: '100%',
                ajax: {
                    url: '/Base/Search_Select2',
                    type: 'post',
                    dataType: 'json',
                    delay: 50,
                    data: function (params) {
                        return {
                            prefix: params.term,
                            Params: selectElement.attr("Params"),
                            TargetID: selectElement.attr("TargetID"),
                            TableName: selectElement.attr("TableName")
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return { id: item.Id, text: item.Name };
                            })
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }
            });
        });
    });
}

$(function () {
    CallSelect2();
});

额外注意事项 #

• 确认模态框的modal-content元素存在，dropdownParent配置正确，避免Select2下拉框被模态框遮挡或层级异常。
• 检查浏览器控制台是否有JS报错（如元素未找到、属性未定义等），这类问题也可能导致请求无法发起。

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