Ytukyg

Question

Is it possible to use JavaScript to open an HTML select to show its option list?

What's the need for this functionality, btw? Just curious... — Jan 10 '09 at 10:34
One reason this would be good is to support keyboard shortcuts (which a lot of sites do these days, e.g. Twitter, GitHub, G+). — Jul 3 '12 at 2:41
You can use your keyboard to open select fields already. Typically, (it depends on your browser) you tab to the field and then press the down or up arrow to open the select and scroll through the options. — Jul 9 '12 at 16:02
@DarrylHein, up and down arrows do not work for my dropdown in my datatable....I wish they did, I have been trying to assign the arrows to the function, if a function existed... — Jul 25 '14 at 18:31
Possible duplicate of How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)? — Jan 22 '16 at 5:50

score 73 · Accepted Answer · 2018-07-10 10:31:12Z

up vote
73
down vote

accepted

Unfortunately there's a simple answer to this question, and it's "No"

edited Jul 10 at 10:31

answered Jan 10 '09 at 0:20

Gareth

88.7k29136148

10

sure about that?
– Christoph
Jan 10 '09 at 0:42

Can't be done (with plain html/javascript)
– scunliffe
Jan 10 '09 at 1:26

3

I am also wishing I could programmatically open a select for keyboard users. In Firefox the change event doesn't fire until the select loses focus, and if the menu isn't actually open, it doesn't select anything when you tab off. LAME-O!
– Marcy Sutton
Dec 8 '10 at 23:23

1

check here jsfiddle.net/oscarj24/GR9jU working example
– Amit
Mar 1 '16 at 20:09

2

@Amit doesn't work (anymore) in Chrome (using v55)
– HammerNL
Jan 20 '17 at 13:57

|
show 5 more comments

Mayank Pathak 2,91343359 · Answer 2 · 2014-04-10 05:32:19Z

up vote
26
down vote

This works on Google Chrome

dropDown = function (elementId) {

    var dropdown = document.getElementById(elementId);

    try {

        showDropdown(dropdown);

    } catch(e) {



    }

    return false;

};



showDropdown = function (element) {

    var event;

    event = document.createEvent('MouseEvents');

    event.initMouseEvent('mousedown', true, true, window);

    element.dispatchEvent(event);

};

edited Apr 10 '14 at 5:32

Mayank Pathak

2,91343359

answered Jan 3 '14 at 15:19

Valentin Borisov

57757

4

Didn't work for me.
– Steve Meisner
Feb 24 '14 at 22:44

4

FYI: It did work for me on Chrome 35.0.1916.153 Make sure you're passing the actual element and not a jQuery obj.
– ShawnFumo
Jul 3 '14 at 19:30

This works on latest Chromium-based Opera too.
– NoOne
Apr 25 '15 at 16:22

14

Unfortunately, it is now deprecated on Chrome 53+
– Washington Guedes
Sep 27 '16 at 19:58

2

Not working with Chrome 59 on Windows.
– rainabba
Apr 19 '17 at 21:54

|
show 1 more comment

Jason de Belle 23122 · Answer 3 · 2009-10-09 18:56:54Z

up vote
23
down vote

I use this... but it requires the user to click on the select box...

Here are the 2 javascript functions

function expand(obj)

{

    obj.size = 5;

}

function unexpand(obj)

{

    obj.size = 1;

}

then i create the select box

<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)">

<option >option1</option>

<option >option2</option>

<option >option3</option>

<option >option4</option>

<option >option5</option>

</select>

I know this code is a little late, but i hope it helps someone who had the same problem as me.

ps/fyi
i have not tested the code above (i create my select box dynamically), and the code i did write was only tested in FireFox.

answered Oct 9 '09 at 18:56

Jason de Belle

23122

4

+1, done similar things before, I believe I also set it's position to absolute when it was expanded so it didn't break document flow, and back to block when it was collapsed.
– CaffGeek
Oct 9 '09 at 19:05

Hey thanks Chad, Your comments just helped me solve an issue! Wish i could +1 you back ;)
– Jason de Belle
Oct 9 '09 at 19:42

In my case it wouldn't solve the problem exactly, but it would be an option. +1
– Darryl Hein
Oct 9 '09 at 22:07

4

@DarrylHein: In this case, it's not just an option, it's 5 <option>s ...
– awe
Jun 7 '13 at 11:45

very crafty, thanks.
– Dan Ochiana
May 11 '17 at 11:40

add a comment |

Jason Plank 2,12442638 · Answer 4 · 2011-11-09 17:11:30Z

up vote
21
down vote

I had this problem...and found a workable solution.

I didn't want the select box to show until the user clicked on some plain HTML. So I overlayed the select element with opacity=.01. Upon clicking, I changed it back to opacity=100. This allowed me to hide the select, and when the user clicked the text the select appeared with the options showing.

edited Nov 9 '11 at 17:11

Jason Plank

2,12442638

answered Sep 28 '09 at 21:44

Phil

21122

4

Isn't that just hiding/showing the actual select field? The question is about showing/opening the options list.
– Darryl Hein
Sep 28 '09 at 22:29

1

My method does show show/open the options list along with the select box itself. The only way to open the options list is to have the select box clicked. Which I accomplished by invisibly overlaying the select on top of some target text.
– Phil
Sep 29 '09 at 15:24

This was the only solution capable of styling the select menu button in the buggy WebView of Android. Thank you!
– Riplexus
Jun 16 '13 at 16:34

Thanks, was looking for this for a couple of hours. This should be the accepted answer!
– avb
Jul 10 '14 at 9:48

2

This doesn't answer the question, but it DOES present a workaround for the case where you want to style a <select> element while still providing the native control, which is a reason why you might want to open the options drop down using js. If you set the opacity of the <select> to 0, when the user clicks the invisible select, the drop down of options will appear as normal.
– Chris Snyder
Jul 21 '15 at 14:57

|
show 1 more comment

Eric Wendelin 29.5k85482 · Answer 5 · 2009-01-10 00:21:46Z

up vote
3
down vote

I'm fairly certain the answer is: No. You can select options with JavaScript but not open the select. You'd have to use a custom solution.

answered Jan 10 '09 at 0:21

Eric Wendelin

29.5k85482

add a comment |

Rhys 1,45963660 · Answer 6 · 2012-10-24 01:48:07Z

up vote
3
down vote

This is very late, but I thought it could be useful to someone should they reference this question. I beleive the below JS will do what is asked.

<script>     

         $(document).ready(function()

           {

          document.getElementById('select').size=3;

           });

    </script>

answered Oct 24 '12 at 1:48

Rhys

1,45963660

1

Slight different because that will adjust that actual size of a select, not show all the select values. If you only have, as in your example, 3 options, then that wills show all of them, but it will also adjust the layout of your page.
– Darryl Hein
Nov 5 '12 at 2:28

1

~Rhys thanks! this lead me to more ideas. Try this out, it will set to the exact height needed for the select controls. $("select:visible").each(function(i,e){e.size=e.length;});
– Sabo
Jun 3 '13 at 11:22

2

Not a good idea. Setting the size on a select element changes it from being a dropdown list to a listbox (using windows controls terminology). The problems this brings is that you have to look after the dropdown now including placement (it doesn't float above the page like a true dropdown), closing (if the user clicks elsewhere the list remains visible). I wasted much time playing with size. An mobile safari seems to ignore it anyway.
– axeman
Apr 14 '15 at 2:26

add a comment |

score 3 · Answer 7 · 2014-01-24 21:33:34Z

The solution I present is safe, simple and compatible with Internet Explorer, FireFox and Chrome.

This approach is new and complete. I not found nothing equal to that solution on the internet. Is simple, cross-browser (Internet Explorer, Chrome and Firefox), preserves the layout, use the select itself and is easy to use.

Note: JQuery is required.

HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CustonSelect</title>

<script type="text/javascript" src="./jquery-1.3.2.js"></script>

<script type="text/javascript" src="./CustomSelect.js"></script>

</head>

<div id="testDiv"></div>

<body>

    <table>

        <tr>

            <td>

                <select id="Select0" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select1" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select2" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select3" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select4" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

    </table>

    <input type="button" id="Button0" value="MoveLayout!"/>

</body>

</html>

JAVASCRIPT CODE

var customSelectFields = new Array();





// Note: The list of selects to be modified! By Questor

customSelectFields[0] = "Select0";

customSelectFields[1] = "Select1";

customSelectFields[2] = "Select2";

customSelectFields[3] = "Select3";

customSelectFields[4] = "Select4";



$(document).ready(function()

{





    //Note: To debug! By Questor

    $("#Button0").click(function(event){ AddTestDiv(); });



    StartUpCustomSelect(null);  



});





//Note: To test! By Questor

function AddTestDiv()

{

    $("#testDiv").append("<div style="width:100px;height:100px;"></div>");

}





//Note: Startup selects customization scheme! By Questor

function StartUpCustomSelect(what)

{



    for (i = 0; i < customSelectFields.length; i++)

    {



        $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });

        $("#" + customSelectFields[i] + "").wrap("<div id="selectDiv_" + customSelectFields[i] + "" onmouseover="BlockCustomSelectAgain();" status="CLOSED"></div>").parent().after("<div id="coverSelectDiv_" + customSelectFields[i] + "" onclick="UpOrDownCustomSelect(this);" onmouseover="BlockCustomSelectAgain();"></div>");





        //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor

        $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});



        BlockCustomSelect($("#" + customSelectFields[i] + ""));



    }

}





//Note: Repositions the div that covers the select using the "onmouseover" event so 

//Note: if element on the screen move the div always stand over it (recalculate! By Questor

function BlockCustomSelectAgain(what)

{

    for (i = 0; i < customSelectFields.length; i++)

    {

        if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")

        {

            BlockCustomSelect($("#" + customSelectFields[i] + ""));

        }

    }

}





//Note: Does not allow the select to be clicked or clickable! By Questor

function BlockCustomSelect(what)

{



    var coverSelectDiv = $(what).parent().next();





    //Note: Ensures the integrity of the div style! By Questor

    $(coverSelectDiv).removeAttr('style');





    //Note: To resolve compatibility issues! By Questor

    var backgroundValue = "";

    var filerValue = "";

    if(navigator.appName == "Microsoft Internet Explorer")

    {

        backgroundValue = 'url(fakeimage)';

        filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='fakeimage' )';

    }





    //Note: To debug! By Questor

    //'border': '5px #000 solid',



    $(coverSelectDiv).css({

        'position': 'absolute', 

        'top': $(what).offset().top + 'px', 

        'left': $(what).offset().left + 'px', 

        'width': $(what)[0].offsetWidth + 'px', 

        'height': $(what)[0].offsetHeight + 'px', 

        'background': backgroundValue,

        '-moz-background-size':'cover',

        '-webkit-background-size':'cover',

        'background-size':'cover',

        'filer': filerValue

    });



}





//Note: Allow the select to be clicked or clickable! By Questor

function ReleaseCustomSelect(what)

{



    var coverSelectDiv = $(what).parent().next();



    $(coverSelectDiv).removeAttr('style');

    $(coverSelectDiv).css({'display': 'none'});



}





//Note: Open the select! By Questor

function DownCustomSelect(what)

{





    //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor

    $(what).css({

        'position': 'absolute', 

        'z-index': '100'

    });





    //Note: Open dropdown! By Questor

    $(what).attr("size","10");



    ReleaseCustomSelect(what);





    //Note: Avoids the side-effect of the select loses focus.! By Questor

    $(what).focus();





    //Note: Allows you to select elements using the enter key when the select is on focus! By Questor

    $(what).keyup(function(e){

        if(e.keyCode == 13)

        {

            UpCustomSelect(what);

        }

    });





    //Note: Closes the select when loses focus! By Questor

    $(what).blur(function(e){

        UpCustomSelect(what);

    });



    $(what).parent().attr("status", "OPENED");



}





//Note: Close the select! By Questor

function UpCustomSelect(what)

{



    $(what).css("position","static");





    //Note: Close dropdown! By Questor

    $(what).attr("size","1");



    BlockCustomSelect(what);



    $(what).parent().attr("status", "CLOSED");



}





//Note: Closes or opens the select depending on the current status! By Questor

function UpOrDownCustomSelect(what)

{



    var customizedSelect = $($(what).prev().children()[0]);



    if($(what).prev().attr("status") == "CLOSED")

    {

        DownCustomSelect(customizedSelect);

    }

    else if($(what).prev().attr("status") == "OPENED")

    {

        UpCustomSelect(customizedSelect);

    }



}

I created a jsfiddle with this, and it does not appear to be working... jsfiddle.net/rL53xj11 — Sep 30 '15 at 19:07
@JonCoombs Yes, it works. I have a client application where this solution is running perfectly. Note, however, that this code is already 2 years old. I recommend testing on an html file on your local machine yourself. Also note the version of your jquery. — Dec 16 '16 at 18:42

score 2 · Answer 8 · 2016-05-09 13:01:59Z

up vote
2
down vote

After trying to solve this issue for some time, I managed to come with a working solution that is also valid:

var event = new MouseEvent('mousedown');

element.dispatchEvent(event);

I've tried to implement this in Jquery as well, using trigger and mousedown or only mousedown but with no success.

edited May 9 '16 at 13:01

answered May 9 '16 at 12:55

Asaf David

1,9531021

This doesn't seem to work in Firefox 50.
– Mathieu Bridon
Jan 13 '17 at 17:28

1

Not working with Chrome 59 on Windows. Does work with FireFox 51 on Windows though.
– rainabba
Apr 19 '17 at 21:54

add a comment |

score 1 · Answer 9 · 2009-01-10 10:26:14Z

At least in Geckos this might be possible. Look here:

https://developer.mozilla.org/en/DOM/element.dispatchEvent

https://developer.mozilla.org/en/DOM/document.createEvent

https://developer.mozilla.org/en/DOM/event.initMouseEvent

edit: I couldn't get this to work; seems like Gareth is correct...

Syed Nasir Abbas 1,091117 · Answer 10 · 2018-04-09 21:00:27Z

<select id="myDropDown">

  <option>html5</option>

  <option>javascript</option>

  <option>jquery</option>

  <option>css</option>

  <option>sencha</option>

</select>

By jQuery:

var myDropDown=$("#myDropDown");

var length = $('#myDropDown> option').length;

//open dropdown

myDropDown.attr('size',length);

//close dropdown

myDropDown.attr('size',0);

By javascript:

var myDropDown=document.getElementById("myDropDown");

var length = myDropDown.options.length;

//open dropdown

myDropDown.size = length;

//close dropdown

myDropDown.size = 0;

Copied from:
Open close select

This isn't opening the select, this is expanding it.
– Azimuth
Aug 16 at 12:22 — Aug 16 at 12:22

anubiskong 74185 · Answer 11 · 2013-04-09 11:57:28Z

up vote
-6
down vote

//use jquery

$select.trigger('mousedown')

answered Apr 9 '13 at 11:57

anubiskong

74185

2

Have tested in Firefox 37 and Chrome 41 to confirm this does not work currently.
– lulalala
Apr 9 '15 at 7:40

3

Maybe it's time to delete this answer.
– Jose Manuel Abarca Rodríguez
Jan 10 '17 at 19:00

add a comment |

score 73 · Accepted Answer · 2018-07-10 10:31:12Z

up vote
73
down vote

accepted

Unfortunately there's a simple answer to this question, and it's "No"

edited Jul 10 at 10:31

answered Jan 10 '09 at 0:20

Gareth

88.7k29136148

10

sure about that?
– Christoph
Jan 10 '09 at 0:42

Can't be done (with plain html/javascript)
– scunliffe
Jan 10 '09 at 1:26

3

I am also wishing I could programmatically open a select for keyboard users. In Firefox the change event doesn't fire until the select loses focus, and if the menu isn't actually open, it doesn't select anything when you tab off. LAME-O!
– Marcy Sutton
Dec 8 '10 at 23:23

1

check here jsfiddle.net/oscarj24/GR9jU working example
– Amit
Mar 1 '16 at 20:09

2

@Amit doesn't work (anymore) in Chrome (using v55)
– HammerNL
Jan 20 '17 at 13:57

|
show 5 more comments

Mayank Pathak 2,91343359 · Answer 13 · 2014-04-10 05:32:19Z

up vote
26
down vote

This works on Google Chrome

dropDown = function (elementId) {

    var dropdown = document.getElementById(elementId);

    try {

        showDropdown(dropdown);

    } catch(e) {



    }

    return false;

};



showDropdown = function (element) {

    var event;

    event = document.createEvent('MouseEvents');

    event.initMouseEvent('mousedown', true, true, window);

    element.dispatchEvent(event);

};

edited Apr 10 '14 at 5:32

Mayank Pathak

2,91343359

answered Jan 3 '14 at 15:19

Valentin Borisov

57757

4

Didn't work for me.
– Steve Meisner
Feb 24 '14 at 22:44

4

FYI: It did work for me on Chrome 35.0.1916.153 Make sure you're passing the actual element and not a jQuery obj.
– ShawnFumo
Jul 3 '14 at 19:30

This works on latest Chromium-based Opera too.
– NoOne
Apr 25 '15 at 16:22

14

Unfortunately, it is now deprecated on Chrome 53+
– Washington Guedes
Sep 27 '16 at 19:58

2

Not working with Chrome 59 on Windows.
– rainabba
Apr 19 '17 at 21:54

|
show 1 more comment

Jason de Belle 23122 · Answer 14 · 2009-10-09 18:56:54Z

up vote
23
down vote

I use this... but it requires the user to click on the select box...

Here are the 2 javascript functions

function expand(obj)

{

    obj.size = 5;

}

function unexpand(obj)

{

    obj.size = 1;

}

then i create the select box

<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)">

<option >option1</option>

<option >option2</option>

<option >option3</option>

<option >option4</option>

<option >option5</option>

</select>

I know this code is a little late, but i hope it helps someone who had the same problem as me.

ps/fyi
i have not tested the code above (i create my select box dynamically), and the code i did write was only tested in FireFox.

answered Oct 9 '09 at 18:56

Jason de Belle

23122

4

+1, done similar things before, I believe I also set it's position to absolute when it was expanded so it didn't break document flow, and back to block when it was collapsed.
– CaffGeek
Oct 9 '09 at 19:05

Hey thanks Chad, Your comments just helped me solve an issue! Wish i could +1 you back ;)
– Jason de Belle
Oct 9 '09 at 19:42

In my case it wouldn't solve the problem exactly, but it would be an option. +1
– Darryl Hein
Oct 9 '09 at 22:07

4

@DarrylHein: In this case, it's not just an option, it's 5 <option>s ...
– awe
Jun 7 '13 at 11:45

very crafty, thanks.
– Dan Ochiana
May 11 '17 at 11:40

add a comment |

Jason Plank 2,12442638 · Answer 15 · 2011-11-09 17:11:30Z

up vote
21
down vote

I had this problem...and found a workable solution.

I didn't want the select box to show until the user clicked on some plain HTML. So I overlayed the select element with opacity=.01. Upon clicking, I changed it back to opacity=100. This allowed me to hide the select, and when the user clicked the text the select appeared with the options showing.

edited Nov 9 '11 at 17:11

Jason Plank

2,12442638

answered Sep 28 '09 at 21:44

Phil

21122

4

Isn't that just hiding/showing the actual select field? The question is about showing/opening the options list.
– Darryl Hein
Sep 28 '09 at 22:29

1

My method does show show/open the options list along with the select box itself. The only way to open the options list is to have the select box clicked. Which I accomplished by invisibly overlaying the select on top of some target text.
– Phil
Sep 29 '09 at 15:24

This was the only solution capable of styling the select menu button in the buggy WebView of Android. Thank you!
– Riplexus
Jun 16 '13 at 16:34

Thanks, was looking for this for a couple of hours. This should be the accepted answer!
– avb
Jul 10 '14 at 9:48

2

This doesn't answer the question, but it DOES present a workaround for the case where you want to style a <select> element while still providing the native control, which is a reason why you might want to open the options drop down using js. If you set the opacity of the <select> to 0, when the user clicks the invisible select, the drop down of options will appear as normal.
– Chris Snyder
Jul 21 '15 at 14:57

|
show 1 more comment

Eric Wendelin 29.5k85482 · Answer 16 · 2009-01-10 00:21:46Z

up vote
3
down vote

I'm fairly certain the answer is: No. You can select options with JavaScript but not open the select. You'd have to use a custom solution.

answered Jan 10 '09 at 0:21

Eric Wendelin

29.5k85482

add a comment |

Rhys 1,45963660 · Answer 17 · 2012-10-24 01:48:07Z

up vote
3
down vote

This is very late, but I thought it could be useful to someone should they reference this question. I beleive the below JS will do what is asked.

<script>     

         $(document).ready(function()

           {

          document.getElementById('select').size=3;

           });

    </script>

answered Oct 24 '12 at 1:48

Rhys

1,45963660

1

Slight different because that will adjust that actual size of a select, not show all the select values. If you only have, as in your example, 3 options, then that wills show all of them, but it will also adjust the layout of your page.
– Darryl Hein
Nov 5 '12 at 2:28

1

~Rhys thanks! this lead me to more ideas. Try this out, it will set to the exact height needed for the select controls. $("select:visible").each(function(i,e){e.size=e.length;});
– Sabo
Jun 3 '13 at 11:22

2

Not a good idea. Setting the size on a select element changes it from being a dropdown list to a listbox (using windows controls terminology). The problems this brings is that you have to look after the dropdown now including placement (it doesn't float above the page like a true dropdown), closing (if the user clicks elsewhere the list remains visible). I wasted much time playing with size. An mobile safari seems to ignore it anyway.
– axeman
Apr 14 '15 at 2:26

add a comment |

score 3 · Answer 18 · 2014-01-24 21:33:34Z

The solution I present is safe, simple and compatible with Internet Explorer, FireFox and Chrome.

This approach is new and complete. I not found nothing equal to that solution on the internet. Is simple, cross-browser (Internet Explorer, Chrome and Firefox), preserves the layout, use the select itself and is easy to use.

Note: JQuery is required.

HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CustonSelect</title>

<script type="text/javascript" src="./jquery-1.3.2.js"></script>

<script type="text/javascript" src="./CustomSelect.js"></script>

</head>

<div id="testDiv"></div>

<body>

    <table>

        <tr>

            <td>

                <select id="Select0" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select1" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select2" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select3" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <select id="Select4" >

                    <option value="0000">0000</option>

                    <option value="0001">0001</option>

                    <option value="0002">0002</option>

                    <option value="0003">0003</option>

                    <option value="0004">0004</option>

                    <option value="0005">0005</option>

                    <option value="0006">0006</option>

                    <option value="0007">0007</option>

                    <option value="0008">0008</option>

                    <option value="0009">0009</option>

                    <option value="0010">0010</option>

                    <option value="0011">0011</option>

                    <option value="0012">0012</option>

                    <option value="0013">0013</option>

                    <option value="0014">0014</option>

                    <option value="0015">0015</option>

                    <option value="0016">0016</option>

                    <option value="0017">0017</option>

                    <option value="0018">0018</option>

                    <option value="0019">0019</option>

                    <option value="0020">0020</option>

                    <option value="0021">0021</option>

                    <option value="0022">0022</option>

                    <option value="0023">0023</option>

                    <option value="0024">0024</option>

                    <option value="0025">0025</option>

                    <option value="0026">0026</option>

                    <option value="0027">0027</option>

                    <option value="0028">0028</option>

                    <option value="0029">0029</option>

                    <option value="0030">0030</option>

                    <option value="0031">0031</option>

                    <option value="0032">0032</option>

                    <option value="0033">0033</option>

                    <option value="0034">0034</option>

                    <option value="0035">0035</option>

                    <option value="0036">0036</option>

                    <option value="0037">0037</option>

                    <option value="0038">0038</option>

                    <option value="0039">0039</option>

                    <option value="0040">0040</option>

                </select>

            </td>

        </tr>

    </table>

    <input type="button" id="Button0" value="MoveLayout!"/>

</body>

</html>

JAVASCRIPT CODE

var customSelectFields = new Array();





// Note: The list of selects to be modified! By Questor

customSelectFields[0] = "Select0";

customSelectFields[1] = "Select1";

customSelectFields[2] = "Select2";

customSelectFields[3] = "Select3";

customSelectFields[4] = "Select4";



$(document).ready(function()

{





    //Note: To debug! By Questor

    $("#Button0").click(function(event){ AddTestDiv(); });



    StartUpCustomSelect(null);  



});





//Note: To test! By Questor

function AddTestDiv()

{

    $("#testDiv").append("<div style="width:100px;height:100px;"></div>");

}





//Note: Startup selects customization scheme! By Questor

function StartUpCustomSelect(what)

{



    for (i = 0; i < customSelectFields.length; i++)

    {



        $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });

        $("#" + customSelectFields[i] + "").wrap("<div id="selectDiv_" + customSelectFields[i] + "" onmouseover="BlockCustomSelectAgain();" status="CLOSED"></div>").parent().after("<div id="coverSelectDiv_" + customSelectFields[i] + "" onclick="UpOrDownCustomSelect(this);" onmouseover="BlockCustomSelectAgain();"></div>");





        //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor

        $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});



        BlockCustomSelect($("#" + customSelectFields[i] + ""));



    }

}





//Note: Repositions the div that covers the select using the "onmouseover" event so 

//Note: if element on the screen move the div always stand over it (recalculate! By Questor

function BlockCustomSelectAgain(what)

{

    for (i = 0; i < customSelectFields.length; i++)

    {

        if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")

        {

            BlockCustomSelect($("#" + customSelectFields[i] + ""));

        }

    }

}





//Note: Does not allow the select to be clicked or clickable! By Questor

function BlockCustomSelect(what)

{



    var coverSelectDiv = $(what).parent().next();





    //Note: Ensures the integrity of the div style! By Questor

    $(coverSelectDiv).removeAttr('style');





    //Note: To resolve compatibility issues! By Questor

    var backgroundValue = "";

    var filerValue = "";

    if(navigator.appName == "Microsoft Internet Explorer")

    {

        backgroundValue = 'url(fakeimage)';

        filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='fakeimage' )';

    }





    //Note: To debug! By Questor

    //'border': '5px #000 solid',



    $(coverSelectDiv).css({

        'position': 'absolute', 

        'top': $(what).offset().top + 'px', 

        'left': $(what).offset().left + 'px', 

        'width': $(what)[0].offsetWidth + 'px', 

        'height': $(what)[0].offsetHeight + 'px', 

        'background': backgroundValue,

        '-moz-background-size':'cover',

        '-webkit-background-size':'cover',

        'background-size':'cover',

        'filer': filerValue

    });



}





//Note: Allow the select to be clicked or clickable! By Questor

function ReleaseCustomSelect(what)

{



    var coverSelectDiv = $(what).parent().next();



    $(coverSelectDiv).removeAttr('style');

    $(coverSelectDiv).css({'display': 'none'});



}





//Note: Open the select! By Questor

function DownCustomSelect(what)

{





    //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor

    $(what).css({

        'position': 'absolute', 

        'z-index': '100'

    });





    //Note: Open dropdown! By Questor

    $(what).attr("size","10");



    ReleaseCustomSelect(what);





    //Note: Avoids the side-effect of the select loses focus.! By Questor

    $(what).focus();





    //Note: Allows you to select elements using the enter key when the select is on focus! By Questor

    $(what).keyup(function(e){

        if(e.keyCode == 13)

        {

            UpCustomSelect(what);

        }

    });





    //Note: Closes the select when loses focus! By Questor

    $(what).blur(function(e){

        UpCustomSelect(what);

    });



    $(what).parent().attr("status", "OPENED");



}





//Note: Close the select! By Questor

function UpCustomSelect(what)

{



    $(what).css("position","static");





    //Note: Close dropdown! By Questor

    $(what).attr("size","1");



    BlockCustomSelect(what);



    $(what).parent().attr("status", "CLOSED");



}





//Note: Closes or opens the select depending on the current status! By Questor

function UpOrDownCustomSelect(what)

{



    var customizedSelect = $($(what).prev().children()[0]);



    if($(what).prev().attr("status") == "CLOSED")

    {

        DownCustomSelect(customizedSelect);

    }

    else if($(what).prev().attr("status") == "OPENED")

    {

        UpCustomSelect(customizedSelect);

    }



}

I created a jsfiddle with this, and it does not appear to be working... jsfiddle.net/rL53xj11 — Sep 30 '15 at 19:07
@JonCoombs Yes, it works. I have a client application where this solution is running perfectly. Note, however, that this code is already 2 years old. I recommend testing on an html file on your local machine yourself. Also note the version of your jquery. — Dec 16 '16 at 18:42

score 2 · Answer 19 · 2016-05-09 13:01:59Z

up vote
2
down vote

After trying to solve this issue for some time, I managed to come with a working solution that is also valid:

var event = new MouseEvent('mousedown');

element.dispatchEvent(event);

I've tried to implement this in Jquery as well, using trigger and mousedown or only mousedown but with no success.

edited May 9 '16 at 13:01

answered May 9 '16 at 12:55

Asaf David

1,9531021

This doesn't seem to work in Firefox 50.
– Mathieu Bridon
Jan 13 '17 at 17:28

1

Not working with Chrome 59 on Windows. Does work with FireFox 51 on Windows though.
– rainabba
Apr 19 '17 at 21:54

add a comment |

score 1 · Answer 20 · 2009-01-10 10:26:14Z

At least in Geckos this might be possible. Look here:

https://developer.mozilla.org/en/DOM/element.dispatchEvent

https://developer.mozilla.org/en/DOM/document.createEvent

https://developer.mozilla.org/en/DOM/event.initMouseEvent

edit: I couldn't get this to work; seems like Gareth is correct...

Syed Nasir Abbas 1,091117 · Answer 21 · 2018-04-09 21:00:27Z

<select id="myDropDown">

  <option>html5</option>

  <option>javascript</option>

  <option>jquery</option>

  <option>css</option>

  <option>sencha</option>

</select>

By jQuery:

var myDropDown=$("#myDropDown");

var length = $('#myDropDown> option').length;

//open dropdown

myDropDown.attr('size',length);

//close dropdown

myDropDown.attr('size',0);

By javascript:

var myDropDown=document.getElementById("myDropDown");

var length = myDropDown.options.length;

//open dropdown

myDropDown.size = length;

//close dropdown

myDropDown.size = 0;

Copied from:
Open close select

This isn't opening the select, this is expanding it.
– Azimuth
Aug 16 at 12:22 — Aug 16 at 12:22

anubiskong 74185 · Answer 22 · 2013-04-09 11:57:28Z

up vote
-6
down vote

//use jquery

$select.trigger('mousedown')

answered Apr 9 '13 at 11:57

anubiskong

74185

2

Have tested in Firefox 37 and Chrome 41 to confirm this does not work currently.
– lulalala
Apr 9 '15 at 7:40

3

Maybe it's time to delete this answer.
– Jose Manuel Abarca Rodríguez
Jan 10 '17 at 19:00

add a comment |

搜尋此網誌

Ytukyg

Is it possible to use JS to open an HTML select to show its option list?

11 Answers
11

Your Answer

Post as a guest

11 Answers
11

11 Answers
11

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

Is it possible to use JS to open an HTML select to show its option list?

11 Answers 11

Your Answer

Sign up or log in

Post as a guest

Post as a guest

11 Answers 11

11 Answers 11

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

11 Answers
11

11 Answers
11

11 Answers
11