tags:

views:

682

answers:

2

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>
A: 

I think that the problem is more likely to do with how the <asp:DropDownList> control has been used. Without seeing the server-side code, it's difficult to get a look at the fuller picture. Can you also provide the aspx markup and code-behind for your page?

Russ Cam
just added a code for a simple page to illustrate. This only occurs in IE 7. sorry i didnt clarify that earlier
george9170
do you `AutoPostBack=true` on the `<DropDownList>` ?
Russ Cam
Using the sample code above adding autopostback doesn't change the behavior.
george9170
Unfortunately I don;t have IE7 here at the moment, but will be able to look tomorrow. Not seeing it in FireFox or IE6 though.
Russ Cam
i appreciate your time looking into this.
george9170
+2  A: 

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

Ryan Versaw