How to open the select input using jquery

Question

So I can see the options of the select element but I need to click on it. What if I want to use a function? When something happens this select element should be selected, means the list is open and I can see the options. I don't want the user to click on the select element, I want something else to open it.

What I've tried

$("select").select();
$("select").click();
$("select").focus();

There is a select element, usually if you want it to open (the drop down list), you click on it. What I want is to open it if I click on a DIV or anything else. I want this drop down list to to open, without having the user clicking on the select element.

are you trying to open drop-down when you click on input – COLD TOLD May 04 '12 at 17:27 — COLD TOLD, May 04 '12 at 17:27
as far as I know you can't force a (native) ` – Alnitak May 04 '12 at 17:30 — Alnitak, May 04 '12 at 17:30
checkout http://api.jqueryui.com/selectmenu/#method-open – Hayden Thring Aug 14 '17 at 11:31 — Hayden Thring, Aug 14 '17 at 11:31

score 22 · Accepted Answer · answered May 04 '12 at 18:01

22

This should work:

var element = $("select")[0], worked = false;
if (document.createEvent) { // all browsers
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    worked = element.dispatchEvent(e);
} else if (element.fireEvent) { // ie
    worked = element.fireEvent("onmousedown");
}
if (!worked) { // unknown browser / error
    alert("It didn't worked in your browser.");
}

Example

answered May 04 '12 at 18:01

noob

8,982
4
37
65

I tried the fiddle but how am I supposed to make it open by itself? Should I click somewhere? – Ali Bassam Feb 10 '13 at 20:37
[So where's your problem just do it on whatever event you like.](http://jsfiddle.net/FVZkX/76/) – noob Feb 12 '13 at 02:37
It worked on Chrome, don't know why not on Firefox. (It didn't give me the alert) – Ali Bassam Feb 17 '13 at 15:25
ohh.. hmm ask ff devs cause after [w3c](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initMouseEvent) this should work and [ff implemented it](https://developer.mozilla.org/en-US/docs/DOM/document.createEvent). – noob Feb 18 '13 at 05:00
6

This worked in Chrome, Safari. Did not work in IE9, IE10, Firefox, Mobile Safari (iPad). – Muxa Jun 06 '13 at 00:43
Perfect. Only added `if ($(element).is(':active')) return;` to not click in the element when it is already opened. – Thiago Macedo Jul 31 '15 at 20:45
@Sopo there's actually a more modern way to do this now. – noob Dec 11 '15 at 15:33
2

Can u give reference link – Sopo Dec 14 '15 at 04:35
Thanks for this. Firefox 43 runs the createEvent condition, but doesn't open the menu. Don't know if there's some issue with the initMouseEvent arguments or if Firefox is just not going to play ball at all. :/ – Jonathan Schofield Jan 13 '16 at 14:21
Nice but that won't work anymore very soon: https://www.chromestatus.com/features/5718803933560832 – Capsule Aug 03 '16 at 05:13

score 5 · Answer 2 · edited Dec 03 '16 at 14:23

5

Just an update here as the accepted answer is correct but outdated and initMouseEvent is soon to be deprecated. [See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent]

Use the following instead: new MouseEvent [See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent]

Example code:

var el = $('select'); // grab the input (jQuery)
var event = new MouseEvent('mousedown'); // create the event listener
el.dispatchEvent(event); // attach the event listener to the element

edited Dec 03 '16 at 14:23

SolarBear

4,534
4
37
53

answered Mar 10 '16 at 20:23

MrPizzaFace

7,807
15
79
123

That developer mozilla links are not working anymore. – sajushko Oct 13 '16 at 16:06
you have to select the DOM element var el = $('select')[0], because dispatchEvent() is not a jQuery method. For me this still doesn't work anyways.. – Valentino Dec 17 '22 at 15:49

Nauphal · Answer 3 · 2012-05-04T17:44:58.427

1

I dont think you can force the select box to drop down using any code. But still you can change the selected option using the code. Pls see this

http://www.mredkj.com/tutorials/tutorial003.html

edited May 04 '12 at 17:44

answered May 04 '12 at 17:26

Nauphal

6,194
4
27
43

How to open the select input using jquery

3 Answers3

Linked