How to show dropdown expanded automatically so that it displays all the options when page loaded

Question

I have the need to show the DropDown (HTML select element) expanded initially when it is loaded so that all the options in the DropDown are shown. I searched quite a bit, but suprisingly, I did not find an answer to such a simple problem. I am using ASP.NET MVC with jquery.

Answer 1

Here's a little mashup (that needs tweaking and optimising) but should get you started:

<div style="position:relative">
    <select style="position: absolute">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>

<script type="text/javascript">

$(document).ready(function() {
    $("select").one("focus", function() {
        this.size = this.options.length;
    }).one("click", function() {
        this.size = 1;
    }).one("blur", function() {
        this.size = this.options.length;
    }).focus();
});

</script>

Answer 2

You could write in your HTML code:

   <select size="3" name="test" id="test">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
   </select>

and then via javascript set a timer that after while changes the select box size attribute to 1. For instance at the end of your page (before the clsed body tag) place this code:

<script type="text/javascript">
   window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds
</script>