动态加载内容的Bootstrap模态框中Select2插件失效求助

嘿，我来帮你搞定这个问题！你遇到的Select2失效，核心原因很简单：你在页面刚加载完就初始化Select2，但这时候模态框里的下拉框还没被加载进来——毕竟你的表单内容是点击按钮后才通过.load()从外部文件拉取的，初始化代码执行的时候，那个带.select2类的下拉框根本还不在DOM里，自然没法生效。

给你几个具体的修复步骤：

1. 把Select2初始化移到内容加载完成后执行 #

把原来放在$(document).ready()里的Select2初始化代码，挪到.load()的回调函数里。因为这个回调是在外部表单内容完全加载到模态框之后才会触发的，这时候下拉框已经存在了，就能正确初始化Select2了。

修改后的点击事件代码应该是这样的：

$(document).on("click", ".manage-modal", function(e){
    e.preventDefault(); // 阻止a标签的默认跳转行为，避免和模态框触发冲突
    act = $(this).attr("data-act");
    ID = $(this).attr("data-ID");
    var link = "form_modal.php?act="+act+"&ID=" + ID;
    $('.modal-body').load(link,function(){
        // 内容加载完成后再初始化Select2
        $('.select2').select2({dropdownParent: $('#manage-modal') });
        $('#manage-modal').modal({show:true});
    });
});

2. 移除a标签里的冗余属性 #

你原来的a标签里有data-toggle="modal"和data-target="#manage-modal"，这会让Bootstrap自动触发模态框显示，和你JS里的.modal({show:true})重复触发，可能导致奇怪的问题。建议把这两个属性去掉，改成这样：

<a href='#' class='manage-modal' data-act="new">OPEN MODAL BUTTON</a>

3. 避免重复初始化的小技巧 #

如果多次打开模态框，可能会重复初始化Select2导致异常。可以在初始化前先销毁已有的Select2实例，确保每次都是全新的初始化：

// 在回调里替换原来的初始化代码
$('.select2').select2('destroy').select2({dropdownParent: $('#manage-modal') });

这样调整之后，你的Select2就能在动态加载的模态框里正常工作啦！

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