模态框内Select2下拉框仅显单个选项，外部正常的问题求助

问题描述 #

将Select2下拉框置于Bootstrap模态框内时，仅显示单个选项；但放在模态框外时，能正常显示所有选项。已尝试在模态框的shown.bs.modal事件及document ready函数中初始化Select2，问题仍未解决。

相关代码 #

HTML代码 #

<div class="modal fade" id="modal_nuevo_tarjetaCredito" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Nuevo Tarjeta de Credito</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- The Select2 dropdown -->
                <select id="input_tarjetaCredito_banco_relacionado" style="width: 527px;"></select>
                <!-- Other form fields -->
                <!-- ... -->
            </div>
            <div class="modal-footer">
                <div class="boxBtnGuardarNewTarjetaCredito">
                    <button class="btn btn-sm btn-success ml-auto" id="btnGuardarNewTarjetaCredito" onClick="guardarNewTarjetaCredito()">Guardar Tarjeta de Crédito</button>
                </div>
            </div>
        </div>
    </div>
</div>

模态框触发函数 #

function modalNuevoTarjetaCredito(object) {
    /* Consistencia de Datos */
    vaciarFormTarjetaCredito();

    $("#modal_nuevo_tarjetaCredito").modal("show");

    // Agrega un listener para el evento "shown.bs.modal"
    $("#modal_nuevo_tarjetaCredito").on("shown.bs.modal", function () {
        // Aquí inicializa el select y llama a la función listarPlanesBancosCompleta
        $("#input_tarjetaCredito_banco_relacionado").select2({
            tags: true
        });
        listarPlanesBancosCompleta();
    });


    $(".boxBtnGuardarNewTarjetaCredito").html("<button class='btn btn-sm btn-success ml-auto' id='btnGuardarNewTarjetaCredito' onClick='guardarNewTarjetaCredito()'>Guardar Tarjeta de Crédito</button>");
}

选项加载函数 #

function listarPlanesBancosCompleta() {
    var endpoint = getDomain() + "/PlanContable/ListaPlanesBancos";

    $.ajax({
        type: "GET",
        async: true,
        url: endpoint,
        headers: {
            "Content-Type": "application/json"
        },
        dataType: "json",
        beforeSend: function (xhr) {
            console.log("cargando");
        },
        success: function (data) {
            var rpta = data.item1;
            var msg = data.item2;
            var dataPlanesBancosCompleta = data.item3; // Actualiza la lista completa

            // Limpiar el select
            $("#input_tarjetaCredito_banco_relacionado").empty();

            // Agregar opciones al select desde dataPlanesBancosCompleta
            for (var i = 0; i < dataPlanesBancosCompleta.length; i++) {
                var item = dataPlanesBancosCompleta[i];
                console.log(item.plan_codigo)
                $("#input_tarjetaCredito_banco_relacionado").append(
                    new Option(item.plan_codigo + " " + item.plan_descripcionlarga, item.plan_codigo)
                );
            }

            // Inicializar Select2 permitiendo la entrada de texto
            $("#input_tarjetaCredito_banco_relacionado").select2({
                tags: true // Permite escribir además de seleccionar opciones
            });
        },
        error: function (data) {
            /*Swal.close();*/
            alert('Error fatal ' + data);
            console.log("failure");
        }
    });
}

问题原因分析 #

1. 重复初始化Select2：在shown.bs.modal事件中初始化了一次Select2，又在listarPlanesBancosCompleta的成功回调中再次初始化，导致Select2实例冲突，渲染异常。
2. 下拉菜单容器冲突：Bootstrap模态框默认的overflow属性可能截断Select2的下拉菜单，或者下拉菜单的z-index层级不足，被模态框遮挡。
3. 事件重复绑定：每次调用modalNuevoTarjetaCredito都会绑定一次shown.bs.modal事件，导致多次触发初始化逻辑，干扰Select2的正常渲染。

解决方案 #

1. 移除重复初始化，统一在选项加载完成后初始化 #

修改modalNuevoTarjetaCredito函数，去掉内部的Select2初始化，仅保留调用选项加载函数；同时在选项加载完成后，先销毁旧的Select2实例再重新初始化：

function modalNuevoTarjetaCredito(object) {
    vaciarFormTarjetaCredito();

    $("#modal_nuevo_tarjetaCredito").modal("show");

    // 先解绑事件再绑定，避免多次触发
    $("#modal_nuevo_tarjetaCredito").off("shown.bs.modal").on("shown.bs.modal", function () {
        listarPlanesBancosCompleta();
    });

    $(".boxBtnGuardarNewTarjetaCredito").html("<button class='btn btn-sm btn-success ml-auto' id='btnGuardarNewTarjetaCredito' onClick='guardarNewTarjetaCredito()'>Guardar Tarjeta de Crédito</button>");
}

2. 指定Select2下拉菜单的父容器 #

在初始化Select2时添加dropdownParent选项，将下拉菜单渲染在模态框内部，避免被截断：

success: function (data) {
    var rpta = data.item1;
    var msg = data.item2;
    var dataPlanesBancosCompleta = data.item3;

    $("#input_tarjetaCredito_banco_relacionado").empty();
    for (var i = 0; i < dataPlanesBancosCompleta.length; i++) {
        var item = dataPlanesBancosCompleta[i];
        $("#input_tarjetaCredito_banco_relacionado").append(
            new Option(item.plan_codigo + " " + item.plan_descripcionlarga, item.plan_codigo)
        );
    }

    // 销毁旧实例并重新初始化，指定模态框为父容器
    $("#input_tarjetaCredito_banco_relacionado").select2("destroy").select2({
        tags: true,
        dropdownParent: $("#modal_nuevo_tarjetaCredito")
    });
}

3. 确保下拉菜单层级足够（可选） #

添加CSS提升Select2下拉菜单的z-index，避免被模态框遮挡：

.select2-dropdown {
    z-index: 99999 !important;
}

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