Django页面多模态框中Select2下拉菜单无法加载的问题

嗨，我仔细看了你的代码和问题描述，第一个创建客户模态框的Select2正常工作，但第二个修改客户模态框通过AJAX加载内容后，下拉菜单为空且搜索功能失效，主要有几个细节问题需要调整，我给你梳理下解决方案：

问题根源分析 #

1. 选择器范围太广：你在初始化Select2时用了全局的.django-select2选择器，这会包含所有模态框里的下拉元素，当第一个模态框的元素还在DOM中时，销毁和初始化操作会相互干扰，导致第二个模态框的Select2无法正确绑定。
2. 调试日志错误：修改模态框的事件里写了console.log("Modal modify closed");，这明显和事件逻辑不符（是模态框打开的事件），会干扰你调试判断。
3. 未精准绑定当前模态框：AJAX加载内容到修改模态框后，应该只操作当前模态框内的下拉元素，而不是全局所有.django-select2。

修正后的代码调整 #

重点修改你的JavaScript部分，以下是调整后的完整脚本代码：

$(document).ready(function () {
    // 创建客户模态框逻辑：限定选择器在当前模态框内
    $('#createCustomerModal').on('shown.bs.modal', function () {
        console.log("Modal create opened");
        // 只操作当前模态框内的django-select2元素
        const $createModalSelects = $(this).find('.django-select2');
        $createModalSelects.djangoSelect2('destroy');
        $createModalSelects.djangoSelect2({
            dropdownParent: $(this).find('.modal-content')
        });
    });
    
    // 修改客户模态框逻辑：修正日志、精准定位当前模态框内元素
    $('#modifycustomerModal').on('show.bs.modal', function (event) {
        console.log("Modal modify opened"); // 修正日志内容
        var button = $(event.relatedTarget);
        var affectation_id = button.data('id');
        
        var modal = $(this);
        $.ajax({
            url: "{% url 'customer-update' %}",
            type: 'GET',
            data: {
                'id': affectation_id
            },
            success: function (data) {
                modal.find('.modal-body').html(data);
                // 只操作当前修改模态框内的下拉元素
                const $modifyModalSelects = modal.find('.django-select2');
                $modifyModalSelects.djangoSelect2('destroy');
                $modifyModalSelects.djangoSelect2({
                    dropdownParent: modal.find('.modal-content')
                });
            }
        })
    });
});

其他优化建议 #

如果你在关闭模态框后想清理Select2实例，避免内存泄漏，可以监听hidden.bs.modal事件，在模态框关闭时销毁对应的Select2：

// 关闭创建模态框时销毁Select2
$('#createCustomerModal').on('hidden.bs.modal', function () {
    $(this).find('.django-select2').djangoSelect2('destroy');
});

// 关闭修改模态框时销毁Select2
$('#modifycustomerModal').on('hidden.bs.modal', function () {
    $(this).find('.django-select2').djangoSelect2('destroy');
});

这样调整后，每个模态框的Select2都只会操作自身内部的下拉元素，不会互相干扰，第二个修改模态框加载AJAX内容后也能正确初始化Select2，下拉菜单和搜索功能就能正常工作啦~

备注：内容来源于stack exchange，提问作者kbenzakrilelp