Раскрывающийся список Select2 не отображает параметры внутри модального окна, но работает вне модального окна ⇐ Jquery

[Гость]

I'm facing an issue with the Select2 dropdown within a modal in my web application. The problem is that when I place the Select2 dropdown inside a modal, it only displays a single option, but when I place it outside the modal, it displays all the options correctly.

Here's the relevant code:

Nuevo Tarjeta de Credito × Guardar Tarjeta de Crédito This is my 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("Guardar Tarjeta de Crédito"); } This is my other function in 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; 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"); } }); } The issue is that when I open the modal and click on the Select2 dropdown, it only shows one option, even though I have a list of options. However, when I use the same Select2 dropdown outside the modal, it displays all the options correctly.

Any help on why the Select2 dropdown behaves differently inside the modal would be greatly appreciated.

I've tried initializing the Select2 dropdown both in the modal's shown.bs.modal event and directly in the document ready function, but the issue persists.


Источник: https://stackoverflow.com/questions/770 ... side-modal