Bootstrap select2 未以模式打开

Question

我正在尝试在动态模态内容中使用 bootstrap SELECT2 插件，但它不起作用。

这是打开模态的脚本：

index.php（这里我调用 custom-select.min.js 和 custom-select.min.css）

$(document).on("click", ".manage-modal", function(e){

    var link = "form_modal.php";

    $('.modal-body').load(link,function(){
        $('#manage-modal').modal({show:true});
    });

});

HTML 部分 -

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

<div id="manage-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-body">

            </div>
            
        </div>
    </div>
</div> 

这是我的模态内容（form_modal.php）的一部分：

<form>
    <select name="contries" class="form-control select2">
        <option value='FR'>FRANCE</option>
        <option value='SP'>SPAIN</option>
        <option value='USA'>USA</option>
    </select>
</form>

<script>
$(document).ready(function() {
    $(".select2").select2({ width: 'resolve' });
});
 </script>

    

Answer 1

这里的 dropdownParent 设置可能会有所帮助。

尝试按以下方式进行：

$(document).ready(function() {
    $(".select2").select2({ dropdownParent: $('#selectParent'), width: 'resolve' });
});

和

<form>
    <div id="selectParent">
        <select name="countries" class="form-control select2">
            <option value='FR'>FRANCE</option>
            <option value='SP'>SPAIN</option>
            <option value='USA'>USA</option>
        </select>
    </div>
</form>