How to open select element using jquery

Question

I have a select element as follows. i want to open it without user having to click on it.

    <select id="selId" class="pos_fixed">
       <option value="volvo">Option1</option>
       <option value="saab">Option2</option>
       <option value="mercedes">Option3</option>
       <option value="audi">Option4</option>
    </select>

Please let me know if its possible using jquery or javascript

Possible duplicate: http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery — Kenneth, Apr 22 '13 at 22:01

score 19 · Answer 1 · edited May 23 '17 at 12:10

You will pass a CSS selector to openSelect() and it will open the select element for you.

var openSelect = function(selector){
     var element = $(selector)[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.");
    }   
}

$(function(){ // when DOM is ready
   // open .select element
   openSelect('.select'); 
});

Here's a fiddle: http://jsfiddle.net/Z48wF/1/

Source: How to open the select input using jquery @stackoverflow.com

Only works in WebKit browsers (Safari, Chrome). Doesn't work in Firefox, Opera and IE. I just tested it. — zengabor, Apr 22 '13 at 22:21
And it won't work anymore in Chrome either in a month: https://www.chromestatus.com/features/5718803933560832 — Capsule, Aug 03 '16 at 05:14

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

You can find a similar question here: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

I don't think there is a single solution that would work in every browser.

I can confirm that using document.createEvent() and .dispatchEvent() (as explained at the above link) works great in WebKit browsers (Safari, Chrome) but not in Firefox, Opera and IE.

However, you can try combining the different solutions listed there.

edited May 23 '17 at 10:29

Community

1
1

answered Apr 22 '13 at 22:17

zengabor

2,013
3
23
28

1

You should have stopped at the second paragraph. :-) There is no reliable, cross–browser way to "open" a select element. – RobG Apr 22 '13 at 22:29

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

I have a complete solution for this problem here Is it possible to use JS to open an HTML select to show its option list?. In this scheme the select can be opened correctly, easy, with all its functionality and preserving the page layout. That solution is safe, simple and compatible with Internet Explorer, FireFox and Chrome.

Thank's!

edited May 23 '17 at 10:29

Community

1
1

answered Jan 23 '14 at 19:16

Eduardo Lucio

1,771
2
25
43

Jordan Ramstad · Answer 4 · 2013-04-22T22:34:19.383

-3

$(document).ready(function(){  
  $('#selId').on('click',function(){
     //do stuff here
  });
  $('#selId').trigger('click');
});

This should work.

Update:

$(document).ready(function(){  
  $('#selId').click(function(){
     //do stuff here
  });
  $('#selId').click();
});

Very similar to the other answer, but that should do it also rather then "click" you can try "focus"

edited Apr 22 '13 at 22:34

answered Apr 22 '13 at 22:05

Jordan Ramstad

169
3
8
37

Rajesh Paul · Answer 5 · 2014-11-03T12:58:53.797

-3

You can use the following script

<script>
    function(){
        selectbox = $(select-selector)[0]
        selectbox.size = selectbox.options.length;
    }
</script>

edited Nov 03 '14 at 12:58

answered Nov 03 '14 at 12:31

Rajesh Paul

6,793
6
40
57

This simple solution works in FF and Chromium (despite the low rating) – Bruno L. Apr 10 '21 at 19:39

How to open select element using jquery

5 Answers5

Linked