Question

On my page using Internet explorer I have a drop down but on the first load of the page because it has a onFocus on it, it needs a double click to show menu. How do I avoid the double click.

The onFocus must still fire but the menu must show at the same time?
how do I do this because the double click is irritating?

Here is a simple example

http://jsfiddle.net/tgH7b/3/

here is the code

    <select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>    



<select name="cars" onFocus="this.style.background = '#999';$(this).click();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>​

Answer 1

The only solution i can think of is to use focusin() callback function instead:

NOTE: focusin() supports event bubbling

http://jsfiddle.net/2AUs6/

<select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>    


<!-- this one -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>

$('select[name=cars]:eq(1)').focusin(function(){
    $(this).css('background','#999')
})