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.

as far as I know you can't force a (native) <select> element to just "drop down". — Alnitak
– Alnitak, Commented May 4, 2012 at 17:30

noob · Accepted Answer · 2012-05-04 18:01:56Z

23

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 4, 2012 at 18:01

noob

9,2224 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ali Bassam Over a year ago

I tried the fiddle but how am I supposed to make it open by itself? Should I click somewhere?

noob Over a year ago

So where's your problem just do it on whatever event you like.

Ali Bassam Over a year ago

It worked on Chrome, don't know why not on Firefox. (It didn't give me the alert)

Muxa Over a year ago

This worked in Chrome, Safari. Did not work in IE9, IE10, Firefox, Mobile Safari (iPad).

Sopo Over a year ago

Can u give reference link

|

SolarBear · Accepted Answer · 2016-12-03 14:23:52Z

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 3, 2016 at 14:23

SolarBear

4,6174 gold badges42 silver badges53 bronze badges

answered Mar 10, 2016 at 20:23

MrPizzaFace

8,12616 gold badges85 silver badges125 bronze badges

2 Comments

sajushko Over a year ago

That developer mozilla links are not working anymore.

Valentino Over a year ago

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..

Nauphal · Accepted Answer · 2012-05-04 17:44:58Z

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 4, 2012 at 17:44

answered May 4, 2012 at 17:26

Nauphal

6,1824 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to open the select input using jquery

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related