data-dropdown-parent="kt_mene_id"
for the Select2 element? You can see a working example of this feature in this page. Refer to the Filter
button in the page toolbar.<div class="menu menu-sub menu-sub-dropdown w-450px w-md-450px" data-kt-menu="true" >
<div class="menu menu-sub menu-sub-dropdown w-450px w-md-450px" data-kt-menu="true" >
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bold">Filtros </div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<div>
<div class="px-7 py-5">
<x-filtros.filtroCollapse titulo="Numero Nota Venta" filtro_contenido="filtro_nv"></x-filtros.filtroCollapse>
<x-filtros.numero filtro_contenido="filtro_nv"></x-filtros.numero>
<x-filtros.filtroCollapse titulo="Rango de Fechas" filtro_contenido="filtro_rango_fechas"></x-filtros.filtroCollapse>
<x-filtros.rangoFechas titulo2="Termino" id_fecha2="fecha_nv_fin" titulo1="Inicio" id_fecha1="fecha_nv_ini" filtro_contenido="filtro_rango_fechas">
<x-filtros.numero></x-filtros.numero>
<x-filtros.filtroCollapse titulo="Rut Cliente" filtro_contenido="filtro_rut"></x-filtros.filtroCollapse>
<x-filtros.rut filtro_contenido="filtro_rut"/></x-filtros.rut>
<x-filtros.filtroCollapse titulo="Patente" filtro_contenido="filtro_patente"></x-filtros.filtroCollapse>
<x-filtros.patente filtro_contenido="filtro_patente"></x-filtros.patente>
<x-filtros.filtroCollapse titulo="Estado Nota Venta" filtro_contenido="filtro_estado"></x-filtros.filtroCollapse>
<x-filtros.checkboxs valor="id_en" texto="nombre_en" :opciones="$estados" filtro_contenido="filtro_estado"></x-filtros.checkboxs>
<x-filtros.filtroCollapse titulo="Vendedor" filtro_contenido="filtro_vendedor"></x-filtros.filtroCollapse>
<x-filtros.select multiple="multiple" valor="id_us" texto="name_us" :opciones="$vendedores" filtro_contenido="filtro_vendedor"></x-filtros.select>
<x-filtros.filtroCollapse titulo="Marcas" filtro_contenido="filtro_marca"></x-filtros.filtroCollapse>
<x-filtros.select multiple="multiple" valor="id_mr" texto="nombre_mr" :opciones="$marcas" filtro_contenido="filtro_marca"></x-filtros.select>
<select data-dropdown-parent="#filtro_padre" multiple class="form-select form-select-solid form-select-sm" data-kt-select2="true" data-placeholder="Seleccione opción" data-allow-clear="true">
<option></option>
@foreach($vendedores as $opt)
@php
$value = $opt["id_us"];
$text = $opt["name_us"];
@endphp
<option locked="true" value="{{$value}}">{{$text}}</option>
@endforeach
</select>
</div>
</div>
<div class="px-7 py-5">
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
</div>
<!--end::Form-->
</div>
src/js/components/app.js
add below workaround right after $(element).select2(options)
line:// 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 = 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;
}
});
}
}
}