Блог

Главная - Вопросы по программированию - выбор 2 дублируется в изимодальном

выбор 2 дублируется в изимодальном

#javascript #jquery-select2

Вопрос:

Я использую iziModal для своего модального, но поле выбора select2 недоступно в модальном,

я добавил следующий код после инициализации модального:

 $('#mySelect2').select2({
            dropdownParent: $('#myIziModal')
        });

но теперь поле выбора дублируется, и одно из полей выбора работает нормально, но другое недоступно для клика

модальный код:

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

примечание: когда я использую $('.Select2').select2({ dropdownParent: $('#myIziModal') }); поле выбора, оно не дублируется и доступно для клика, но не отображает никаких параметров.

выход

Ответ №1:

Поскольку Вы используете идентификатор(id=»mySelect2), пожалуйста, используйте класс для определения выбора 2

Подобный этому $('.mySelect2').select2({ dropdownParent: $('#myIziModal') });

и используйте свойство класса в любом месте кода, как это <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>

Комментарии:

1. вопрос обновлен после тестирования вашего решения. пожалуйста, прочтите еще раз.

Ответ №2:

Элемент select должен иметь класс с именем select2 . поэтому, если вы используете другое имя класса для элемента select, вы должны изменить его(только элемент select, который находится в модальном режиме).

 <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')
        });
    }
Метки: