select2 在 iziModal 中重复答案

【问题标题】：select2 duplicated in iziModalselect2 在 iziModal 中重复
【发布时间】：2021-09-13 09:42:32
【问题描述】：

我使用 iziModal 作为我的模态，但是 select2 选择框在模态中不可点击，

我在初始化modal后添加了如下代码：

$('#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') }); 时，选择框不会重复并且可点击但不显示任何选项。

output

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

因为您使用的是 ID(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>

【讨论】：

问题在测试您的解决方案后更新。请再读一遍。

【解决方案2】：

选择元素必须有一个名为select2 的类。所以如果你为选择元素使用另一个类名，你必须改变它（只有模式中的选择元素）。

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

【讨论】：