select2 在 iziModal 中重复

Question

我使用 iziModal 作为我的模式，但是 select2 select 框在模式中不可点击，

我在初始化模态后添加了以下代码：

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

但现在 select 框重复了，其中一个 select 框工作正常，但另一个不可点击

模态代码：

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

output

Answer 1

因为您使用的是 ID(id="mySelect2), 请使用 class 定义 select 2

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

并在 class 属性代码中的任何位置使用像这样 <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>

Answer 2

select 元素必须有一个名为 select2 的 class。因此，如果您为 select 元素使用另一个 class 名称，则必须更改它（只有模态中的 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')
        });
    }

select2 在 iziModal 中重复

select2 duplicated in iziModal

javascript

jquery-select2