How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

javascript

event-listeners

polyfills

cross-browser-compatibility

byAlex Kataev·Feb 11, 2025

Due to browser security constraints, programmatically opening a <select> element is not feasible. Instead, construct a mock dropdown with HTML/CSS/JS that displays on mouseover. Here's an illustrative example:

<div class="fake-select" onmouseover="showOptions()" onmouseout="hideOptions()">
  <span>Select an option</span>
  <ul class="hidden">
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>

.fake-select .hidden { display: none; position: absolute; }

function showOptions() {
  // hover over options: 'SHOW yourself!'
  document.querySelector('.hidden').style.display = 'block';
}
function hideOptions() {
  // mouse out: 'RUN for your lives!'
  document.querySelector('.hidden').style.display = 'none';
}

Mouse hover over the fake-select div imitates a <select> dropdown effect.

Unmasking the process: Event triggering

HTML elements used to have an activation behavior initiated by interaction events. Invoked through document.createEvent() and dispatchEvent() methods, such functionality is now deprecated, as illustrated:

function showDropdown(selectElement) {
  // faux mousedown: 'Fake it till you make it!'
  var event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown', true, true, window);
  selectElement.dispatchEvent(event);
}

Regrettably, with recent updates, events such as click, mousedown, etc., triggered by untrusted (script-induced) sources are disregarded, prioritizing user safety. Google Chrome 53+ is a prime example.

Cross-browser compatibility: A dance with polyfills

Crafting smooth cross-browser experiences without relying on library-specific attributes is key. Consider using polyfills or transpilers such as Babel for compatibility. Adopt feature detection for fallbacks, providing seamless browsing experiences.

Alternatives: Exploring the frameworks landscape

Consider leveraging JavaScript frameworks like React, Vue, or Angular. They offer custom components emulating a dropdown effect. Open-source libraries like Select2 and Chosen offer richly customizable, controllable and stylable components.

Emulating user interaction: Creating digital decoys

Despite restrictions, web developers ever so often need to create the illusion of user interaction. Be it a select dropdown on a mouseover event or a fancy animation triggered by scroll events.

Accessibility and usability: Crafting for all

When creating custom elements, never forget about accessibility and usability. Keyboard navigation, screen reader compatibility, and seamless navigation are indispensable.

Practical scenarios and solutions: The world is not enough

Whether it's a settings menu, a filter panel, or a multi-level navigation, custom dropdowns are everywhere. Expand beyond mouseover, think about touchscreen devices, where hovering isn't applicable. Adapt to the device capabilities, creating experiences for all users.

explain-codes / Javascript / How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

Linked

How can I inspect disappearing element in a browser?



How to get the onclick calling object?



Best way to track onchange as-you-type in input type="text"?



Change Select List Option background color on hover



How to use Checkbox inside Select Option

