resetting kt select
const statusEl = document.getElementById("statusFilter");
let statusSelect = null;
if (statusEl && typeof KTSelect !== "undefined") {
statusSelect = new KTSelect(statusEl);
}
statusEl.value = "";
$(statusEl).trigger("change");
doesnt seem to work while trying to reset the element
<select class="kt-select" multiple data-kt-select="true" data-kt-select-multiple="true"
id="statusFilter" data-kt-select-placeholder="-- Select Status --" data-kt-select-config='{
"optionsClass": "kt-scrollable overflow-auto max-h-[200px]"
}'
>
<option value="paid" data-kt-select-option='Paid'>Paid
</option>
<option value="not_paid" data-kt-select-option='Not Paid'>Not Paid</option>
<option value="active" data-kt-select-option='Active'>Active</option>
<option value="suspended" data-kt-select-option='Suspended'>Suspended</option>
</select>
Replies (4)
Thanks for the workaround, this is really helpful. I'm running into the same issueclearSelection() resets the visual dropdown, but the previously selected values still get sent in the datatable/filter payload. Has there been any update or fix for this on the KT Select side? visit https://subwaysurfersdl.org/
Hi
This appears to be a bug in the KT Select component where clearSelection() doesn't properly sync with the native select element. Your manual approach is the correct workaround. We will fix it in the select component.
Thanks
Hi
You need to use the KT Select component's API methods to properly reset it.
Here's the correct way to reset your KT Select component:
const statusEl = document.getElementById("statusFilter");
let statusSelect = null;
if (statusEl && typeof KTSelect !== "undefined") {
statusSelect = new KTSelect(statusEl);
}
// Method 1: Use clearSelection() method (RECOMMENDED)
if (statusSelect) {
statusSelect.clearSelection();
}
// Method 2: Use setSelectedOptions with empty array
if (statusSelect) {
statusSelect.setSelectedOptions([]);
}Thanks
what worked for me ....
let statusEl = document.getElementById("statusFilter");
let statusSelect = null;
if (statusEl && typeof KTSelect !== "undefined") {
statusSelect = new KTSelect(statusEl);
}
if (statusEl && statusEl.instance) {
//Clear KTSelect internal state and UI
if (statusEl.instance._state) {
statusEl.instance._state._selectedOptions = [];
}
if (statusEl.instance._options) {
statusEl.instance._options.forEach(opt => opt.classList.remove("selected"));
}
if (statusEl.instance._displayElement) {
statusEl.instance._displayElement.setAttribute("data-selected", "0");
statusEl.instance._displayElement.innerHTML =
statusEl.instance._config.placeholder || "-- Select Status --";
}
Array.from(statusEl.options).forEach(opt => (opt.selected = false));
}your method
clearSelection();
does clear the drop down but the selected options (although now unselected) still carry through the datatable payload.
thanks<pre></pre>
