Uso iziModal para mi modal, pero no se puede hacer clic en el cuadro de selección select2 en modal,
agregué el siguiente código después de inicializar modal:
$('#mySelect2').select2({ dropdownParent: $('#myIziModal') });pero ahora el cuadro de selección está duplicado y uno de los cuadros de selección funciona bien, pero no se puede hacer clic en el otro
código modal:
<div id="myIziModal" style="display: none;"> <select class="select mySelect2" style="width: 150px;"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> </div> function showModal() { $("#myIziModal").iziModal({ title: "info", }); $("#myIziModal").iziModal('open'); $('.mySelect2').select2({ dropdownParent: $('#myIziModal') }); } nota: cuando uso $('.Select2').select2({ dropdownParent: $('#myIziModal') }); el cuadro de selección no está duplicado y se puede hacer clic en él, pero no muestra ninguna opción.
Debido a que está utilizando ID (id = "mySelect2), use la clase para definir seleccionar 2
Así $('.mySelect2').select2({ dropdownParent: $('#myIziModal') });
y use en la propiedad de clase en cualquier parte del código. Así <div id="myIziModal" style="display: none;"> <select class="select mySelect2" style="width: 150px;"> <option value="1">one</option> <option value="3">two</option> <option value="5">three</option> </select> </div>
El elemento de selección debe tener una clase con el nombre select2 . entonces, si usa otro nombre de clase para el elemento de selección, debe cambiarlo (solo el elemento de selección que está en el modal).
<div id="myIziModal"> <select id="mySelect2" class="select2"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> </div> function showModal() { $("#myIziModal").iziModal(); $("#myIziModal").iziModal('open'); $('#mySelect2').select2({ dropdownParent: $('#myIziModal') }); }