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












100














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






javascript html-select







share|improve this question
























  • What's the need for this functionality, btw? Just curious...
    – Shivasubramanian A
    Jan 10 '09 at 10:34






  • 1




    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 '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.
    – Darryl Hein
    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...
    – user2847749
    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)?
    – Aᴍɪʀ
    Jan 22 '16 at 5:50
















100














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






javascript html-select







share|improve this question
























  • What's the need for this functionality, btw? Just curious...
    – Shivasubramanian A
    Jan 10 '09 at 10:34






  • 1




    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 '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.
    – Darryl Hein
    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...
    – user2847749
    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)?
    – Aᴍɪʀ
    Jan 22 '16 at 5:50














100












100








100


7





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






javascript html-select







share|improve this question















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






javascript html-select




javascript html-select






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited May 11 '17 at 21:55









Kara

3,936104152




3,936104152










asked Jan 10 '09 at 0:17









Darryl Hein

68.1k83187245




68.1k83187245












  • What's the need for this functionality, btw? Just curious...
    – Shivasubramanian A
    Jan 10 '09 at 10:34






  • 1




    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 '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.
    – Darryl Hein
    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...
    – user2847749
    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)?
    – Aᴍɪʀ
    Jan 22 '16 at 5:50


















  • What's the need for this functionality, btw? Just curious...
    – Shivasubramanian A
    Jan 10 '09 at 10:34






  • 1




    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 '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.
    – Darryl Hein
    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...
    – user2847749
    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)?
    – Aᴍɪʀ
    Jan 22 '16 at 5:50
















What's the need for this functionality, btw? Just curious...
– Shivasubramanian A
Jan 10 '09 at 10:34




What's the need for this functionality, btw? Just curious...
– Shivasubramanian A
Jan 10 '09 at 10:34




1




1




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 '12 at 2:41




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 '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.
– Darryl Hein
Jul 9 '12 at 16:02




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 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...
– user2847749
Jul 25 '14 at 18:31




@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












Possible duplicate of How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
– Aᴍɪʀ
Jan 22 '16 at 5:50




Possible duplicate of How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
– Aᴍɪʀ
Jan 22 '16 at 5:50












11 Answers
11






active

oldest

votes


















75














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






share|improve this answer



















  • 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



















26














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);

};





share|improve this answer



















  • 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



















23














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.






share|improve this answer

















  • 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



















21














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.






share|improve this answer



















  • 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





















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.






share|improve this answer





























    3














    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>





    share|improve this answer

















    • 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



















    3














    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);
    
    }
    

    
}





    share|improve this answer



















    • 1




      I created a jsfiddle with this, and it does not appear to be working... 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



















    2














    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.






    share|improve this answer























    • 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





















    1














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






    share|improve this answer































      0














      <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






      share|improve this answer

















      • 1




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



















      -6














      //use jquery
      
$select.trigger('mousedown')





      share|improve this answer

















      • 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











      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f430237%2fis-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      11 Answers
      11






      active

      oldest

      votes








      11 Answers
      11






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      75














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






      share|improve this answer



















      • 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
















      75














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






      share|improve this answer



















      • 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














      75












      75








      75






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






      share|improve this answer














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







      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Jul 10 at 10:31

























      answered Jan 10 '09 at 0:20









      Gareth

      89.4k29136148




      89.4k29136148








      • 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














      • 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








      10




      10




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




      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




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




      3




      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




      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




      1




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




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




      2




      2




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




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













      26














      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);
      
};





      share|improve this answer



















      • 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
















      26














      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);
      
};





      share|improve this answer



















      • 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














      26












      26








      26






      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);
      
};





      share|improve this answer














      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);
      
};






      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Apr 10 '14 at 5:32









      Mayank Pathak

      2,91343359




      2,91343359










      answered Jan 3 '14 at 15:19









      Valentin Borisov

      58757




      58757








      • 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














      • 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








      4




      4




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




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




      4




      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




      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




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




      14




      14




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




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




      2




      2




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




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











      23














      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.






      share|improve this answer

















      • 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
















      23














      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.






      share|improve this answer

















      • 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














      23












      23








      23






      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.






      share|improve this answer












      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.







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Oct 9 '09 at 18:56









      Jason de Belle

      23122




      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














      • 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








      4




      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




      +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




      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




      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




      4




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






      @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




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











      21














      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.






      share|improve this answer



















      • 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


















      21














      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.






      share|improve this answer



















      • 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
















      21












      21








      21






      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.






      share|improve this answer














      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.







      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Nov 9 '11 at 17:11









      Jason Plank

      2,13442638




      2,13442638










      answered Sep 28 '09 at 21:44









      Phil

      21122




      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
















      • 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










      4




      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




      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




      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




      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




      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




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




      2




      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






      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













      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.






      share|improve this answer


























        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.






        share|improve this answer
























          3












          3








          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.






          share|improve this answer












          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 10 '09 at 0:21









          Eric Wendelin

          29.8k85582




          29.8k85582























              3














              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>





              share|improve this answer

















              • 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
















              3














              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>





              share|improve this answer

















              • 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














              3












              3








              3






              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>





              share|improve this answer












              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>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Oct 24 '12 at 1:48









              Rhys

              1,47463661




              1,47463661








              • 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














              • 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








              1




              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




              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




              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






              ~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




              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




              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











              3














              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);
              
    }
              

              
}





              share|improve this answer



















              • 1




                I created a jsfiddle with this, and it does not appear to be working... 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
















              3














              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);
              
    }
              

              
}





              share|improve this answer



















              • 1




                I created a jsfiddle with this, and it does not appear to be working... 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














              3












              3








              3






              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);
              
    }
              

              
}





              share|improve this answer














              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);
              
    }
              

              
}






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Jan 24 '14 at 21:33

























              answered Jan 23 '14 at 2:40









              Eduardo Lucio

              355413




              355413








              • 1




                I created a jsfiddle with this, and it does not appear to be working... 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














              • 1




                I created a jsfiddle with this, and it does not appear to be working... 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








              1




              1




              I created a jsfiddle with this, and it does not appear to be working... jsfiddle.net/rL53xj11
              – mix3d
              Sep 30 '15 at 19:07




              I created a jsfiddle with this, and it does not appear to be working... jsfiddle.net/rL53xj11
              – mix3d
              Sep 30 '15 at 19:07












              Didn't work for me either.
              – Jon Coombs
              Dec 12 '16 at 21:47




              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




              @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











              2














              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.






              share|improve this answer























              • 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


















              2














              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.






              share|improve this answer























              • 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
















              2












              2








              2






              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.






              share|improve this answer














              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.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited May 9 '16 at 13:01

























              answered May 9 '16 at 12:55









              Asaf David

              1,9881022




              1,9881022












              • 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




















              • 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


















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




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




              1




              1




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






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













              1














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






              share|improve this answer




























                1














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






                share|improve this answer


























                  1












                  1








                  1






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






                  share|improve this answer














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







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Jan 10 '09 at 10:26

























                  answered Jan 10 '09 at 0:42









                  Christoph

                  128k31153213




                  128k31153213























                      0














                      <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






                      share|improve this answer

















                      • 1




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
















                      0














                      <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






                      share|improve this answer

















                      • 1




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














                      0












                      0








                      0






                      <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






                      share|improve this answer












                      <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







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Apr 9 at 21:00









                      Syed Nasir Abbas

                      1,121117




                      1,121117








                      • 1




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














                      • 1




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








                      1




                      1




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




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











                      -6














                      //use jquery
                      
$select.trigger('mousedown')





                      share|improve this answer

















                      • 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
















                      -6














                      //use jquery
                      
$select.trigger('mousedown')





                      share|improve this answer

















                      • 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














                      -6












                      -6








                      -6






                      //use jquery
                      
$select.trigger('mousedown')





                      share|improve this answer












                      //use jquery
                      
$select.trigger('mousedown')






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Apr 9 '13 at 11:57









                      anubiskong

                      76185




                      76185








                      • 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














                      • 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








                      2




                      2




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






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






                      3




                      3




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




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


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f430237%2fis-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      Property 'forRoot' does not exist on type 'typeof NgxJsonLdModule'

                      Image
                      up vote 0 down vote favorite I have installed this package @ngx-lite/json-ld. In an attempt to make my SEO schema.org dynamic. On importing the module as specified on this Tutorial I get this error: ERROR in src/app/app.module.ts(18,21): error TS2339: Property 'forRoot' does not exist on type 'typeof NgxJsonLdModule'. Here is my app.module import { NgtUniversalModule } from "@ng-toolkit/universal"; import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; // Third Party library import { NgxJsonLdModule } from "@ngx-lite/json-ld"; import { AppComponent } from "./app.component"; import { AppRoutingModule } from "./app-routing.module"; @NgModule({ declarations: [AppComponent], imports: [
                      Read more

                      Saint-Aignan (Tarn-et-Garonne)

                      Image
                      Saint-Aignan Region Okzitanien Département Tarn-et-Garonne Arrondissement Castelsarrasin Kanton Beaumont-de-Lomagne Gemeindeverband Terres des Confluences Koordinaten 44° 1′  N , 1° 5′  O 44.019166666667 1.0752777777778 Koordinaten: 44° 1′  N , 1° 5′  O Höhe 67–138 m Fläche 4,85 km 2 Einwohner 414 (1. Januar 2015) Bevölkerungsdichte 85 Einw./km 2 Postleitzahl 82100 INSEE-Code 82152 Rathaus (Mairie) von Saint-Aignan Saint-Aignan ist eine französische Gemeinde mit 414 Einwohnern (Stand: 1. Januar 2015) im Département Tarn-et-Garonne in der Region Okzitanien (vor 2016: Midi-Pyrénées). Sie gehört zum Arrondissement Castelsarrasin und zum Kanton Beaumont-de-Lomagne (bis 2015: Kanton Saint-Nicolas-de-la-Grave). Die Einwohner werden Saint-Aignanois genannt. Inhaltsverzeichnis 1 Geografie 2 Bevölkerungsentwicklung 3 Sehenswürdigkeiten 4 Weblinks Geografie |
                      Read more

                      C# - Discord Bot inconsistently sending private messages

                      Image
                      up vote 0 down vote favorite I have a discord bot which sends private messages. Once I tried doing this command on my main discord account and it worked, and on my other account, it didn't work. I tried doing this again on my main account (I restarted the bot beforehand) and it didn't work. I also have a problem where I can't execute commands just by PM'ing the bot. Here is my code for a command that I am trying to use. [Command("accounts",RunMode = RunMode.Async)] public async Task AccountsCommandHelp() { var user = UserAccounts.UserAccounts.GetAccount(Context.User); user = UserAccounts.UserAccounts.GetAccount(Context.User); string p = user.prefix; string message = "**Commands:**n" + $"**{p}account stats
                      Read more