Jquery on focus event with an html select tag

jquery

Solution

This appears to be a known issue in IE7 and forward.

As mentioned, one alternative is to use the onmousedown event to bypass this.

    $(document).ready(function() {
        $('select').mousedown(function() {

            $(this).addClass('yellowBackground');

        })
    });

This won't work with tabbing over to the dropdown, though onfocusin is supposed to work as well (but it doesn't exist in jquery).

Problem

I am using jquery to change the background of a dropdown. For some reason it now requires two clicks to select an item, instead of one click. What i cannot find out is why this occurs and an efficient workaround or better yet a fix. This seems to be occuring in ie7 & ie 8 (had a friend test it on their box) Below is the exact code we are using to test this issue. -----------------------------COMPLETE MARKUP -------------------------------- ``` <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> .yellowBackground, .yellowBackground > * > * { background-color: #FFFF79; } </style> <script type="text/javascript"> $(document).ready(function() { $('select').focus(function() { $(this).addClass('yellowBackground'); }) }); </script> </head> <body> <form> <select> <option value="A">Option 1</option> <option value="B">Option 2</option> </select> </form> </body> </html> ```

Original source