Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
KTSelect - Programmatically change values
Hi all.
I'm trying to find docs online as I need info on how to programmatically change values within a KTSelect item through javascript. I was able to trace getSelectedOptions and setSelectedOptions but somehow they are not working properly and not updated the UI. Is anyone aware of any relevant documentation or example?
Replies (1)
Hi
In the current implementation, setSelectedOptions() only updates KTSelect’s internal state. It does not update the native <select>, the trigger display, or the option styling in the dropdown. That’s a known limitation of the current API; we will fix it to also refresh the display and option.
This is a workaround for now. We will include the fix in this week's updates.
1. Get the instance from the original <select>
const selectEl = document.querySelector("#your-select"); // your <select data-kt-select>
const ktSelect = KTSelect.getInstance(selectEl) || new KTSelect(selectEl);2. Set value and refresh the UI
function setKTSelectValue(selectEl, value) {
const ktSelect = KTSelect.getInstance(selectEl) || new KTSelect(selectEl);
const option = selectEl.querySelector(`option[value="${value}"]`);
if (!option) return;
ktSelect.setSelectedOptions([option]);
Array.from(selectEl.options).forEach(opt => { opt.selected = opt.value === value; });
selectEl.value = value;
ktSelect.updateSelectedOptionDisplay();
}
