How can you infer HTML SELECT programmatically (for example, because of a mouse)?

Question

How can you programmatically tell HTML select to drop out (e.g. because of a mouse)?

Answer 1

You cannot do this with the HTML select tag, but you can do it with JavaScript and HTML. There are many existing controls that do this, such as a “suggest” list attached to an SO record “interesting / ignored tag”, or a Gmail search for email addresses.

There are many JavaScript + HTML controls that provide this feature - look for ideas to autocomplete ideas.

See this link for autocomplete management ... http://ajaxcontroltoolkit.codeplex.com/

Answer 2

This is actually possible with HTML + Javascript, despite the fact that everywhere people say that it is not.

However, this only works on Chrome. Read more if you are interested.

---

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

Some elements in HTML have activation behavior, which means that the user can activate them. This triggers a sequence of events depending on the activation mechanism [...] , for example, using the keyboard or voice input or mouse clicks .

When a user launches an element with a specific activation behavior in a way other than clicking on it, the default action for the interaction event should consist in performing activation steps for artificially clicking on the element.

<select> , being interactive content, I thought it was possible to programmatically display its <option> . After hours of playing, I found that using document.createEvent() and .dispatchEvent() worked.

However, the 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 someone finds a way to do the same, but not in Chrome, feel free to change this fiddle .

Answer 3

Xavier Ho answers how to solve the problem in most browsers currently located. But it’s good practice not to send / modify JavaScript events anymore . (For example, mousedown in this case)

In version 53+, Google Chrome will not perform the default action for untrusted events . Such events, created or modified using a script, or dispatched by the dispatchEvent method. This is a change to align with Firefox and IE, which, I think, no longer perform the action.

For testing purposes, Fiddle , provided that the Xavier answer will not work in chrome 53+. (I do not check it with FF and IE).

Links for reference:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

And initMouseEvent is also deprecated

Answer 4

This is the closest I could get, resize the onmouseover element and restore the size of onmouseout:

  <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 

Answer 5

I have the same problem and I found an easier way to solve it using html and css.

 select{ opacity: 0; position: absolute; } 

 <select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> <button>click</button> 

Answer 6

I think this is not possible in Chrome.

Version 53 chrome seems to disable this functionality, as indicated by Asim K T.

According to the specification http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Reliable events should not trigger a default action (except for event clicks).

However, they included it in webview, but I did not test it.

We found that some webviews use fastclick inside them and because of the risk of breakage we are going to allow mousedown when choosing even if they are not trusted.

And in this discussion, the idea is to leave the developer an open drop-down menu programmatically abandoned.

Answer 7

If someone is still looking for this:

 <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" >Show dropdown items</button> 

JavaScript:

 var is_visible=false; $(document).ready(function(){ $('#fire').click(function (e) { var element = document.getElementById('dropdown'); if(is_visible){is_visible=false; return;} is_visible = true; var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); /* can be added for ie compatiblity. optionsSelect.focus(); var WshShell = new ActiveXObject("WScript.Shell"); WshShell.SendKeys("%{DOWN}"); */ e.stopPropagation(); return false; }); $(document).click(function(){is_visible=false; }); }); 

Update:

One, until there is an ideal solution to this problem, but you can try to avoid this scenario. Why do you want to do this. I wondered about a solution a few months ago to make a plugin for mobile devices

https://github.com/HemantNegi/jquery.sumoselect

Finally, in the end, a custom div (or any other element) was masked using a transparent select element so that it could interact directly with the user.

Answer 8

Here is the best way I've found. NOTE. This only works with IE on Windows, and your network should probably be in a safe zone - because we are accessing the shell. The trick is that the ALT Down Arrow is a key combination to open a snapshot of a selection.

 <button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button> <select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9"> <option>ABC</option> <option>DEF</option> <option>GHI</option> <option>JKL</option> </select> <script type="text/javascript"> function doClick() { optionsSelect.focus(); var WshShell = new ActiveXObject("WScript.Shell"); WshShell.SendKeys("%{DOWN}"); } </script> 

Answer 9

Stop thinking that one thing is impossible, nothing impossible to do when you want to do.

Use this extensible JS function created by the guy.

http://code.google.com/p/expandselect/

Enable this JS and just call by passing the parameter as your select identifier, for example:

 ExpandSelect(MySelect) 

Answer 10

Maybe I'm wrong, but I do not think that this is possible with the default selection. You can do something with JS and CSS that achieve the desired result, but not (as far as I know) vanilla SELECT.

Answer 11

This is not exactly what you requested, but I like this solution for its simplicity. In most cases, when I want to initiate a drop-down list, this is because I verify that the user really made the choice. I resize the drop-down list and focus it, which perfectly emphasizes what they missed:

 $('#cboSomething')[0].size = 3; $('#cboSomething')[0].focus();