jQuery select change/click problem - change doesn't work in IE, click doesn't work in Chrome

Question

As the title says, I have a problem with binding to a change in a dropdown select list - it seems that "change" doesn't work with IE(7 or 8), so when I try the alternative and use a "click" event, it works in IE but doesn't work in Chrome! Am I missing something obvious here?

Here's my code:

//event handler for showing hidden form elements (also ensures only relevant hidden els shown)
        //IE needs click event instead of change
        $('.select_change').live("change", function(){
            //check if value is other
            if ($(this).val() == 'other') 
                $(this).parent().find(".hidden").show();
            //if user changes select value from other then hide input
            if ($(this).val() != 'other') 
                $(this).parent().find(".hidden").hide();
            return false;
        });

The dropdown HTML is as follows:

<select id="title" name="title" class="validate[required,funcCall[validateNotDefault]] select_change" >
<option value="default" selected="selected">Please choose from options</option>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="chocoloate">Chocolate</option>

<option value="other">Other</option>
</select>

Answer 1

Try using $.bind() or $.change() instead. I haven't encountered this problem before.

$('.select_change').change(function(){
            //check if value is other
            if ($(this).val() == 'other') 
                $(this).parent().find(".hidden").show();
            //if user changes select value from other then hide input
            if ($(this).val() != 'other') 
                $(this).parent().find(".hidden").hide();
            return false;
        });

Answer 2

change still doesn't bubble completely correctly in IE, you can do this to work in both cases though:

$('.select_change').live("change click", function(){
   $(this).parent().find(".hidden").toggle($(this).val() == 'other');
});

This still uses .live(), just responds to both events...since what you're doing isn't harmed by firing once or twice, it's fine to do so in this case. The above is just a bit shorter using .toggle(bool) to simplify your logic a bit.

Answer 3

I'm assuming you are using the .live() method because you may be adding more select objects after the document is rendered. Otherwise .bind() or .change() should suffice for your needs.

Since you have mentioned that .live("click") will work with IE and .live("change") will work with everything else, you could use .live("click change") since .live will accept multiple, space-separated events.

Answer 4

To fix the "change" problem in IE here is what I did.

This is likely a problem with a race condition with input fields in IE. By creating a separate thread to handle the UI changes the onChange should fire correctly in IE.

I solved a similar situation by doing the following inside my change handler:

if (jQuery.browser.msie) { setTimeout(DoSomeUIChange, 0); } else { DoSomeUIChange(); }

The DoSomeUIChange gets fired in a separate thread and so removes the race condition.