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

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.