Question

I know there are lots of solutions for chained dropdown lists but i’m trying to create something a little bit different than usual.

Menu before user click:

<select>
 <option>Choose Something</option>
</select>

Menu after user clicked:

<select>
<option>Loading options</option>
</select>

Menu after options loaded from server:

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

The problem is after menu filled, its size is small and other items don’t appear until second click.

Is there a solution with that ?

Answer 1

Here is a some workaround. Might help you.

HTML (empty option as place holders)

<select>
  <option>Select Something</option>
  <option>&nbsp;</option> 
  <option>&nbsp;</option>
  <option>&nbsp;</option>
</select>​

JavaScript

var clickCount = 0;
$("select").click(function(e) {
   if (clickCount == 0) $("select").empty().html("<option>Loading options</option>");
   clickCount++;
   if (clickCount == 1) {
       $("select").click();
       return;
   }
   if (clickCount == 2) {
       $("select").empty().html("<option>Select Something</option><option>1</option> <option>2</option> <option>3</option><option>4</option> ");
       $("select :nth-child(1)").attr("selected", "selected");
   }
});​

Demo 1 or Demo 2 on jsfiddle.net.

Hope this works out for you.