Select2 下拉菜单不显示模态内的选项，但在模态外工作

Question

我在网络应用程序的模式中遇到了 Select2 下拉列表的问题。问题是，当我将 Select2 下拉菜单放置在模态框内时，它仅显示一个选项，但是当我将其放置在模态框外时，它会正确显示所有选项。

相关代码如下：

<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>

这是我的JS：

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>");
}

这是我在JS中的另一个函数：

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");
        }
    });
}

问题是，当我打开模式并单击 Select2 下拉列表时，它只显示一个选项，即使我有一个选项列表。但是，当我在模式之外使用相同的 Select2 下拉菜单时，它会正确显示所有选项。

任何关于为什么 Select2 下拉菜单在模式内表现不同的帮助将不胜感激。

我尝试在模式的 shown.bs.modal 事件中以及直接在文档就绪函数中初始化 Select2 下拉列表，但问题仍然存在。

Answer 1

您必须让 select 2 明白它位于具有此代码的模式中

`$('#input_tarjetaCredito_banco_relacionado').select2({
                dropdownParent: $('#modal_nuevo_tarjetaCredito .modal-body'),
});`