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 (3)
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>
