Problem with .change function in IE

I have a jquery script below to swap a select box based on an option, it works fine in Firefox but it's not doing anything in IE, but IE is not showing any errors either, I was really hoping someone could point me in the right direction. Any help would be hugely appreciated:

$(".initDealers").change(function () {   

    if ($('.initDealers option:selected').val() == "All" ) {

       $('.allDealers')开发者_开发知识库.show();

       $('.initDealers').hide();

    } else {

        $('.initDealers').show();

    }
});

IE doesn't recognise that a select box has changed until you move focus away from the field.

This is due to the way IE uses the Windows selectbox control; it effectively works like a plug-in in this respect. You may also notice quirks with select boxes in IE when it comes to layering; select-boxes have a habit of always showing on top, even when you've got other elements covering them. This is also caused by the same thing.

The quick solution is to trap the click event rather than the change event. This will then pick up when the user makes a change, without having to wait for them to change focus away from the field.

However even then you'll have issues, because the click event doesn't pick up changes made using the keyboard, so you could navigate to the field using the tab key and change it, and the click event would never be fired.

For this reason, you may need to catch both the click and change events. Of course then you end up with the issue of possibly catching the same change more than once. It's not ideal, and you'll need to code for it, but its the only way to catch all possible ways for the user to change the field.

Its still not perfect, because if the user is using the keyboard to navigate and change the field, they can move up and down the select list to their heart's content, but you won't get any event triggered until the move away from the field. This is unavoidable.

Try using .click instead of .change

Getting jQuery to recognise .change() in IE

You could do something like that:

$('select').bind($.browser.msie ? 'click' : 'change', function() {});