167

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

5
  • What's the need for this functionality, btw? Just curious... Jan 10, 2009 at 10:34
  • 2
    One reason this would be good is to support keyboard shortcuts (which a lot of sites do these days, e.g. Twitter, GitHub, G+).
    – mahemoff
    Jul 3, 2012 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, 2012 at 16:02
  • 1
    @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, 2014 at 18:31
  • 1
    Wouldn't this be useful to say, have the select element open when any of the parent element div is clicked rather than the select element itself?
    – H K
    Mar 17, 2022 at 23:34

10 Answers 10

137

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

15
  • 33
    sure about that?
    – Christoph
    Jan 10, 2009 at 0:42
  • 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! Dec 8, 2010 at 23:23
  • 4
    @Amit doesn't work (anymore) in Chrome (using v55)
    – HammerNL
    Jan 20, 2017 at 13:57
  • 7
    Are you aware of any context around this? Is it disallowed for some security reason? Did a standard for implementing it fail to coalesce? Is it technically impossible because of some obscure technical limitation? In other words, just, why? Oct 7, 2019 at 6:13
  • 3
    Not a helpful answer without any explanation.
    – ChrisN
    Sep 8, 2020 at 17:20
41

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.

8
  • 9
    Isn't that just hiding/showing the actual select field? The question is about showing/opening the options list. Sep 28, 2009 at 22:29
  • 3
    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, 2009 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, 2013 at 16:34
  • 1
    Thanks, was looking for this for a couple of hours. This should be the accepted answer!
    – avb
    Jul 10, 2014 at 9:48
  • 4
    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. Jul 21, 2015 at 14:57
29

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.

5
  • 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, 2009 at 19:05
  • Hey thanks Chad, Your comments just helped me solve an issue! Wish i could +1 you back ;) Oct 9, 2009 at 19:42
  • In my case it wouldn't solve the problem exactly, but it would be an option. +1 Oct 9, 2009 at 22:07
  • 5
    @DarrylHein: In this case, it's not just an option, it's 5 <option>s ...
    – awe
    Jun 7, 2013 at 11:45
  • very crafty, thanks. May 11, 2017 at 11:40
28

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);
};
7
  • 7
    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, 2014 at 19:30
  • This works on latest Chromium-based Opera too.
    – NoOne
    Apr 25, 2015 at 16:22
  • 33
    Unfortunately, it is now deprecated on Chrome 53+ Sep 27, 2016 at 19:58
  • 1
    It didn't work for me on PC/Mac, but it works on mobile (and you need to add a mouseup event as well). Feb 25, 2017 at 10:16
  • 2
    Not working with Chrome 59 on Windows.
    – rainabba
    Apr 19, 2017 at 21:54
5

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.

2
  • 3
    This doesn't seem to work in Firefox 50. Jan 13, 2017 at 17:28
  • 4
    Not working with Chrome 59 on Windows. Does work with FireFox 51 on Windows though.
    – rainabba
    Apr 19, 2017 at 21:54
4

This is very late, but I thought it could be useful to someone who needs it. The below JS will solve this problem.

<script>     
    $(document).ready(() => {
        document.getElementById('select').size = 3
    })
</script>
3
  • 4
    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. Nov 5, 2012 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;});
    – Chinthana
    Jun 3, 2013 at 11:22
  • 3
    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, 2015 at 2:26
3

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.

1

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

This approach is new (2014) 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 (jquery-1.3.2) 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);
    }
    
}
5
  • 2
    I created a jsfiddle with this, and it does not appear to be working... jsfiddle.net/rL53xj11
    – mix3d
    Sep 30, 2015 at 19:07
  • Didn't work for me either.
    – Jon Coombs
    Dec 12, 2016 at 21:47
  • @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, 2016 at 18:42
  • @EduardoLucio Can you convert it into a code sample on here? Jul 14, 2019 at 23:03
  • @1.21gigawatts Come back to the "basic" =D ! Create a folder. Download the "jquery-1.3.2.js" code.jquery.com/jquery-1.3.2.js, creating a file ("my.htm") with the contents of "HTML CODE" and a file ("CustomSelect.js") with the contents of "JAVASCRIPT CODE". Put everything inside the folder you created. Double-click in "my.htm" to open it in your browser. Done! Thanks! =D Jul 16, 2019 at 19:48
-3
<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

1
  • 8
    This isn't opening the select, this is expanding it.
    – Azimuth
    Aug 16, 2018 at 12:22
-12
//use jquery
$select.trigger('mousedown')
3
  • 4
    Have tested in Firefox 37 and Chrome 41 to confirm this does not work currently.
    – lulalala
    Apr 9, 2015 at 7:40
  • 12
    Maybe it's time to delete this answer. Jan 10, 2017 at 19:00
  • 1
    In vanilla js would be $select.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })), so no need for jquery. None the less, the code doesn't open the dropdown list, for security reasons.
    – user670839
    Apr 13, 2020 at 19:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.