Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
problem with 2 or more select2 multiple in menu
Dear
I have a problem when I use 2 or more select2 multiple inside the menu.
when i use 1 it works fine.
apparently the problem is here
Uncaught TypeError: i.on is not a function
at scripts.bundle.js:1:8559
at Array.map (<anonymous>)
at Object.init (scripts.bundle.js:1:8058)
at Object.init (scripts.bundle.js:1:41)
at HTMLDocument.<anonymous> (scripts.bundle.js:1:325)
send code
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt_menu_filtro">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bold">Opciones de Filtro</div>
</div>
<!--end::Header-->
<!--begin::Separator-->
<div class="separator border-gray-200"></div>
<!--end::Separator-->
<!--begin::Content-->
<div class="px-7 py-5">
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Sucursales:</label>
<!--end::Label-->
<!--begin::Input-->
<select id="selectSucursal" class="form-select form-select-solid fw-bold" multiple data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_filtro" data-allow-clear="true">
</select>
<!--end::Input-->
</div>
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Puestos:</label>
<!--end::Label-->
<!--begin::Input-->
<select id="selectPuestos" class="form-select form-select-solid fw-bold" multiple data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_filtro" data-allow-clear="true">
</select>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button id="filterReiniciar" type="reset" class="btn btn-light btn-active-light-primary fw-semibold me-2 px-6" data-kt-menu-dismiss="true">Reiniciar</button>
<button id="filterAplicar" type="submit" class="btn btn-primary fw-semibold px-6" data-kt-menu-dismiss="true">Aplicar</button>
</div>
<!--end::Actions-->
</div>
<!--end::Content-->
</div>
<!--end::Menu 1-->Replies (3)
Hi,
Thank you for the heads-up.
Noted and we will check this issue and provide a solution as soon as possible. Please stay tuned!
Regards.
Hi,
Can you please try to edit createSelect2 function in src/js/components/app.js with the below one:
var createSelect2 = function () {
// Check if jQuery included
if (typeof jQuery == "undefined") {
return;
}
// Check if select2 included
if (typeof $.fn.select2 === "undefined") {
return;
}
var elements = [].slice.call(document.querySelectorAll("[data-control="select2"], [data-kt-select2="true"]"));
elements.map(function (element) {
if (element.getAttribute("data-kt-initialized") === "1") {
return;
}
var options = {
dir: document.body.getAttribute("direction")
};
if (element.getAttribute("data-hide-search") == "true") {
options.minimumResultsForSearch = Infinity;
}
$(element).select2(options);
// Handle Select2"s KTMenu parent case
if (element.hasAttribute("data-dropdown-parent") && element.hasAttribute("multiple")) {
var parentEl = document.querySelector(element.getAttribute("data-dropdown-parent"));
if (parentEl && parentEl.hasAttribute("data-kt-menu")) {
var menu = KTMenu.getInstance(parentEl);
if (!menu) {
menu = new KTMenu(parentEl);
}
if (menu) {
$(element).on("select2:unselect", function (e) {
element.setAttribute("data-multiple-unselect", "1");
});
menu.on("kt.menu.dropdown.hide", function(item) {
if (element.getAttribute("data-multiple-unselect") === "1") {
element.removeAttribute("data-multiple-unselect");
return false;
}
});
}
}
}
element.setAttribute("data-kt-initialized", "1");
});
}And recompile your assets with gulp or webpack?
Please let us know if it works for you.
Regards.
