If a click handler on an <option> does not run in Chrome, use the change event on its parent <select> to respond to a user’s selection. If an image or button should choose an option, listen for click on that image or button, then set the select’s value. An option is a menu item inside a select, not the right integration point for either job.
Why an option’s click handler is the wrong event
A native <option> is an item contained in a <select>, <optgroup>, or <datalist>. Its value is submitted when selected. For a native dropdown, handle the change on the owning select rather than relying on a click handler attached to an individual option. MDN documents change for select elements when a user modifies the value: MDN: change event. The option reference is at MDN: <option>.
This is not evidence of a universal Chrome defect. The practical issue is that an option is part of the browser’s native select control; responding to the select’s committed value is the appropriate pattern.
Handle a user changing the dropdown
Attach one change listener to the select and read its value. This handles a committed selection without tying your code to a particular option’s click behavior.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
const select = document.getElementById('vehicle-attribute');
select.addEventListener('change', (event) => {
console.log(event.target.value);
});The same select-level handler provides a single path for changes made through mouse, keyboard, touch, or assistive technology. MDN describes click as device-independent for controls activated by those input methods, but the dropdown’s selection logic belongs on change: MDN: click event.
Choose an option from an image or button
When a separate control should choose a dropdown value, put the click handler on that control. Give each control the option value it represents, assign that value to the select, and keep the application’s selection logic in a shared function or event 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);
}
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 changes the selected value programmatically; it does not itself represent a user’s committed interaction. Dispatching change is an optional choice when that programmatic selection should run the same handler. If the code should not invoke user-change logic, omit the dispatch and call the relevant application function directly instead.
The empty-value placeholder remains available in this example. If controls or option values are looked up dynamically, verify that the target exists before using it.
Rank #3
Fix element lookup before debugging event behavior
A click or change handler cannot update the intended dropdown if the code has selected the wrong element—or no element at all. Prefer a stable ID with document.getElementById(), a selector with querySelector(), or a form’s elements collection. Avoid building a JavaScript expression as a string and passing it to eval().
An archived SitePoint discussion about image clicks and dropdown options records a failure where the select lookup did not resolve the intended element, producing “SelectObject.length is null or not an object.” Its later answer used DOM lookup and guarded against missing elements: SitePoint Forums discussion. In current code, the same principle is simple:
const select = document.getElementById('vehicle-attribute');
if (!select) {
throw new Error('Dropdown #vehicle-attribute was not found');
}When to replace the native select
Keep a native <select> when it meets the interface requirement; it supplies established browser behavior and semantics. Use a custom dropdown only when there is a clear UI need and you can reproduce the keyboard and accessibility behavior users expect. A collection of clickable options is not a reliable substitute merely to make per-option click handlers run.
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
