I use iziModal for my modal, but select2 select box is not clickable in modal,
i added the following code after initializing modal:
$('#mySelect2').select2({
dropdownParent: $('#myIziModal')
});
but now select box is duplicated and one of the select boxes is working fine but the other is not clickable
modal code:
<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')
});
}
note: when i use $('.Select2').select2({ dropdownParent: $('#myIziModal') }); select box is not duplicated and is clickable but do not display any options.
Because You are using ID(id="mySelect2), Please Use class for define select 2
Like this
$('.mySelect2').select2({ dropdownParent: $('#myIziModal') });
and use in class property any where in the code
Like this
<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>
The select element must have a class with name select2. so if you use another class name for the select element you have to changed it(only the select element that is in the 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')
});
}