160

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

Kara
  • 6,115
  • 16
  • 50
  • 57
Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
  • What's the need for this functionality, btw? Just curious... – Shivasubramanian A Jan 10 '09 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 03 '12 at 02: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. – Darryl Hein Jul 09 '12 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... – user2847749 Jul 25 '14 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 '22 at 23:34

10 Answers10

131

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

Gareth
  • 133,157
  • 36
  • 148
  • 157
  • 31
    sure about that? – Christoph Jan 10 '09 at 00:42
  • Can't be done (with plain html/javascript) – scunliffe Jan 10 '09 at 01: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 08 '10 at 23:23
  • this not the correct answer for this question the following link will give you the answer http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due – user2988855 Aug 08 '15 at 10:26
  • Technically this answer is correct, it's not possible. But if you want to make it seem like you did look at the answer further down: http://stackoverflow.com/a/1489537/151503 – Redzarf Nov 09 '15 at 16:18
  • 2
    check here http://jsfiddle.net/oscarj24/GR9jU/ working example – Amit Mar 01 '16 at 20:09
  • @Amit it doesn't work in FF – Fanky Jan 10 '17 at 16:34
  • 4
    @Amit doesn't work (anymore) in Chrome (using v55) – HammerNL Jan 20 '17 at 13:57
  • 1
    Most accurate to say there isn't a well-supported method amongst all the major browsers (as of 2017-04-19). @Asaf David did provide a method that works in FireFox so it's clearly possible in a non-insignificant number of use-cases. – rainabba Apr 19 '17 at 21:57
  • 1
    Thanks for the TLDR :) – JackDev May 24 '18 at 13:54
  • 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*? – Mattias Martens Oct 07 '19 at 06:13
  • 3
    Not a helpful answer without any explanation. – ChrisN Sep 08 '20 at 17:20
  • 1
    Please check: https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due/69569729#69569729 It uses size="x" to open the dropdown while maintaining the dropdown and parent positions. The code also uses CSS styles to hide the right scroll area when it is not needed.: – Mykola Uspalenko Oct 14 '21 at 18:26
  • Nops !!! It's possible try use select2 plugin, using the open method https://select2.org/programmatic-control/methods – Marinpietri Feb 20 '23 at 12:34
  • @Marinpietri The "select2 plugin" that you mention isn't an HTML select as the question asks. Instead it requires replacing the whole select with a custom Javascript-driven widget. – Gareth Feb 21 '23 at 20:14
40

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.

Jason Plank
  • 2,336
  • 5
  • 31
  • 40
Phil
  • 401
  • 4
  • 2
  • 9
    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
  • 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 '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
  • 1
    Thanks, was looking for this for a couple of hours. This should be the accepted answer! – avb Jul 10 '14 at 09:48
  • 4
    This doesn't answer the question, but it DOES present a workaround for the case where you want to style a 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
  • Phil or @ChrisSnyder, providing a working jsfiddle would be nice. Also, does the user have to actually click (I expect that's what most readers here want to avoid) or can it be simulated/triggered another event? My goal is to have a dropdown "instagrow"--show its effect immediately--upon choosing a "Show more options..." row at the end of the list. – Jon Coombs Dec 12 '16 at 21:52
  • yes, I'm not sure how it solves the original question, can you provide a code sample? Thanks! – Quang Van Dec 10 '18 at 17:22
  • This works beautifully on mobile; far better than the rather Stone Age standard dropdown. I used a full-screen div for the underlay element, placed a full-screen image inside it, added a title with absolute positioning then laid the select on top of that, also with absolute positioning and 100% width/height so the user can tap anywhere on it. The list pops up over the image. Very satisfying. – Graham Apr 20 '20 at 16:12
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);
};
Mayank Pathak
  • 3,621
  • 5
  • 39
  • 67
Valentin Borisov
  • 740
  • 6
  • 8
27

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.

Jason de Belle
  • 279
  • 3
  • 2
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.

Asaf David
  • 3,167
  • 2
  • 22
  • 38
4

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>
Rhys
  • 2,807
  • 8
  • 46
  • 68
  • 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. – Darryl Hein Nov 05 '12 at 02: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 03 '13 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 '15 at 02: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.

Eric Wendelin
  • 43,147
  • 9
  • 68
  • 92
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);
    }
    
}
Eduardo Lucio
  • 1,771
  • 2
  • 25
  • 43
  • 2
    I created a jsfiddle with this, and it does not appear to be working... http://jsfiddle.net/rL53xj11/ – mix3d Sep 30 '15 at 19:07
  • Didn't work for me either. – Jon Coombs Dec 12 '16 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. – Eduardo Lucio Dec 16 '16 at 18:42
  • @EduardoLucio Can you convert it into a code sample on here? – 1.21 gigawatts Jul 14 '19 at 23:03
  • @1.21gigawatts Come back to the "basic" =D ! Create a folder. Download the "jquery-1.3.2.js" http://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 – Eduardo Lucio Jul 16 '19 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

Syed Nasir Abbas
  • 1,722
  • 17
  • 11
-12
//use jquery
$select.trigger('mousedown')
anubiskong
  • 1,733
  • 1
  • 13
  • 6