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 →If a dropdown choice needs to trigger JavaScript, listen for change on the parent <select>, not click on an individual <option>. If an image or button should choose an option, listen for click on that image or button, set the select’s value, and run the selection logic there.
Why an option’s onclick is the wrong place to listen
An <option> is a menu item contained by a <select>, <optgroup>, or <datalist>; it is not a regular standalone control. Native dropdown selection is best handled at the <select> level. MDN documents the change event for <select> elements when the user modifies their value: MDN: change event. The selected option’s value is the value used when the form is submitted: MDN: <option>.
As an Amazon Associate I earn from qualifying purchases.
That distinction matters because a user can choose from a native menu with a mouse, keyboard, touch, or assistive technology. A change handler on the select follows the committed selection instead of depending on a particular event on an option. The click event itself is device-independent, but it belongs on the control the user activates: MDN: click event.
Recommended Free Tools
Handle native dropdown changes with change
Attach one handler to the select and read its value. Keep a placeholder option’s empty value if the form needs an unselected state.
#1 Best Overall
<select id="vehicle-attribute">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<script>
const select = document.getElementById('vehicle-attribute');
select.addEventListener('change', (event) => {
const selectedValue = event.target.value;
console.log(selectedValue);
// Run the application logic for this selection here.
});
</script>Read event.target.value when the option’s value is what matters. Use selectedIndex when the option’s position is what matters. MDN shows the same select-level event-listener pattern in its change-event documentation.
Let an image or button choose an option
When a separate control should select a dropdown value, the click belongs to that control. Give the select a stable ID, map each control to an option value, and keep the application logic in a shared function or change handler.
<select id="vehicle-attribute">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" data-value="1">Choose one</button>
<button type="button" data-value="2">Choose two</button>
<script>
const select = document.getElementById('vehicle-attribute');
function handleSelection(event) {
console.log(event.target.value);
// Run the application logic for this selection here.
}
select.addEventListener('change', handleSelection);
document.querySelectorAll('[data-value]').forEach((control) => {
control.addEventListener('click', () => {
select.value = control.dataset.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
});
});
</script>Assigning select.value updates the control, but a script-driven assignment is not itself a user-committed change. Dispatching change is an explicit choice when the programmatic selection should reuse the select’s existing handler. If the application instead calls shared logic directly, it does not need to dispatch a synthetic event.
Fix a select lookup that returns null
An event handler cannot update the dropdown if the code has not found the intended select. In the SitePoint discussion, the reported error was SelectObject.length is null or not an object; the issue was a lookup that did not resolve to the select element. A later answer recommended replacing string-built eval lookup with a direct DOM lookup and attaching handlers to the clickable elements: SitePoint Forums discussion.
Rank #3
- Give the select a stable ID and retrieve it with
document.getElementById('vehicle-attribute'). - Check that the result exists before assigning handlers or changing its value.
- If the select is inside a form and you have the form element,
form.elementsis another direct way to retrieve named controls. - Avoid constructing JavaScript expressions from form and control names with
eval; direct references make lookup failures easier to spot.
If option values are used to find related elements, account for the placeholder’s empty value before attaching a handler. The SitePoint thread’s later example guarded the lookup before assigning an onclick handler.
Choose the right event target
| What the user does | Event target | Event or action |
|---|---|---|
| Chooses an item from a native dropdown | <select> |
Listen for change and read value or selectedIndex. |
| Activates a separate button or image to choose an item | The button or image control | Listen for click, set the select’s value, then run shared logic or dispatch change. |
Keep a native select when it meets the interface need: it supplies familiar control behavior across input methods. A custom dropdown is appropriate only when there is a clear UI requirement and the replacement also provides the keyboard and accessibility behavior users need.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What the SitePoint thread does—and does not—show
The original question in the SitePoint Forums thread was about using image onclick handlers to update a dropdown. The discussion supports two practical lessons: make sure the select lookup resolves correctly, and put the click handler on the external clickable element rather than relying on an option’s click. It does not establish a universal Chrome defect. If a reduced example still behaves unexpectedly after using the select’s change event and verifying the element lookup, investigate that specific example rather than assuming every Chrome dropdown is broken.
Quick 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.
