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

by

This used to actually be possible with HTML+Javascript, despite everywhere else people say it is not, but it was deprecated later on and does not work now.

However, this only worked in Chrome. Read more if you’re interested.

According to W3C Working Draft for HTML5, Section 3.2.5.1.7. Interactive Content:

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism […] for instance using keyboard or voice input, or through mouse clicks.

When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to run synthetic click activation steps on the element.

<select> being an Interactive Content, I believed that it is possible to programatically display its <option>s. After a few hours of playing around, I discovered that using document.createEvent() and .dispatchEvent() works.

That said, demo time. Here is a working Fiddle.

HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

If anyone finds a way to do the same but not in Chrome, please feel free to modify this fiddle.
​

More Related Contents:

  1. Make file not show anything in console [closed]
  2. Add values to database on button click [closed]
  3. Changing HTML with Javascript when a link is clicked on? [duplicate]
  4. how to make outer lengthy text wrap around & scroll through a fixed/floating without hiding some text behind that [closed]
  5. How to prevent form from being submitted?
  6. How to launch html using Chrome at “–allow-file-access-from-files” mode?
  7. Relative Paths in Javascript in an external file
  8. Call javascript function after script is loaded
  9. Dynamically loading css stylesheet doesn’t work on IE
  10. How can I detect whether an iframe is loaded?
  11. Including both href and onclick to HTML tag
  12. filereader api on big files
  13. Uploading Multiple Files to Google Drive with Google App Script
  14. Convert relative path to absolute using JavaScript
  15. HTML 5 – Play file at certain time point
  16. Target=’_blank’ to show in new window, NOT new tab, possible?
  17. How is it possible for an iframe to access its parents DOM?
  18. Is it possible to use any HTML5 fanciness to export local storage to Excel?
  19. Convert TD columns into TR rows
  20. Adding a new line in a JSX string inside a paragraph – React
  21. Remove whitespaces inside a string in javascript
  22. Adding Google Translate to a web site
  23. Specify parent divs opacity but make it not affect children HTML elements
  24. Prevent Highlight of Text Table
  25. How to escape HTML
  26. User Activity Tracking using javascript library [closed]
  27. HTML5 Canvas API – formatting individual words with italics
  28. jQuery form submit() is not working in IE6?
  29. How do I dynamically insert an SVG image into HTML?
  30. Why I cant use jQuery functionality

Leave a Comment