Recommended Free Tools
For a native HTML dropdown, use the change event—not onselect—when the user commits a new option. Read the selected value from event.target.value.
Basic solution for a native dropdown
A native dropdown is an HTML <select> element, represented in JavaScript by HTMLSelectElement. Register a change listener and read the value assigned to the chosen <option>.
<label for="category">Choose a category</label>
<select id="category">
<option value="">Choose one</option>
<option value="books">Books</option>
<option value="games">Games</option>
</select>
<script>
document.querySelector("#category").addEventListener("change", (event) => {
const selectedValue = event.target.value;
console.log(selectedValue);
});
</script>In this example, choosing “Books” logs books, while choosing “Games” logs games. The value is normally more useful for application logic than the text displayed to the user. See MDN’s change event reference and the HTMLSelectElement documentation.
Why there is no ordinary dropdown onSelect event
The word “select” describes what the user does, but select is not the general browser event for changing an option in a native dropdown. The semantic event for a committed <select> value is change.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
MDN defines change as firing for form controls such as <input>, <select>, and <textarea> when the user modifies the value. For a select, that means the option choice has been committed.
Choosing between change, input, focus, and click
| Event | Use it when you need to detect | Important detail |
|---|---|---|
change |
A committed dropdown value | The normal choice for a native <select>; it is not guaranteed to fire for every intermediate value alteration. |
input |
Value updates as they occur | Its timing differs from change; use it only when ongoing updates matter. |
focus |
The control receiving focus | It does not indicate that the selected option changed. |
click |
A pointer click | It describes a mouse or pointer action and is not a complete replacement for a value-change handler, especially for keyboard users. |
Equivalent handler styles
Recommended: addEventListener
const select = document.querySelector("#category");
select.addEventListener("change", (event) => {
console.log(event.target.value);
});addEventListener keeps registration explicit and allows multiple listeners.
Rank #2
Property form: onchange
const select = document.querySelector("#category");
select.onchange = (event) => {
console.log(event.target.value);
};This is also supported, but assigning the property replaces any handler previously assigned to it.
Inline HTML (usually avoid)
<select onchange="console.log(event.target.value)">
...
</select>Inline handlers mix behavior into markup and are less maintainable than script-based registration.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Using the selected option in real behavior
Submit or load data after a choice
const category = document.querySelector("#category");
category.addEventListener("change", async (event) => {
const value = event.target.value;
if (!value) return;
// Submit, navigate, or request dependent data here.
console.log(`Selected category: ${value}`);
});Put the required action inside the handler, or use normal form submission when that is the desired behavior. Merely changing the selection does not automatically submit the page’s form.
Read the displayed label when you actually need it
category.addEventListener("change", (event) => {
const option = event.target.selectedOptions[0];
console.log({ value: option.value, label: option.text });
});Use the stable value for identifiers and the option text only for presentation or reporting.
Rank #4
When onSelect may be valid
JavaScript UI libraries and custom dropdown components can define callbacks named select, onSelect, or similar. Those APIs belong to the specific library or component, not to the native HTML select event model. Check that component’s documentation and follow its callback signature. For an ordinary browser <select>, use change.
Common mistakes
- Listening for
selecton a native dropdown instead ofchange. - Reading the option’s visible label when the application needs its
value. - Using
clickalone, which misses the semantic purpose of a value-change listener and can produce pointer-specific behavior. - Expecting
changeto report every intermediate interaction rather than the committed choice. - Assuming a changed selection submits a form without an explicit handler or normal form action.
The Bottom Line
For a native HTML dropdown, attach a change listener to the <select> element and use event.target.value. Reserve onSelect for a framework or custom component that explicitly documents that callback.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
