Jquery capture when select list value changed without change event

I have a form with some select lists that will show/hide more input fields when certain values are selected.

The problem is that most of the users are data entry people so they heavily use the keyboard when entering data and a select list's change event only fires when focus has left the input if done via keyboard. I've tried adding the same functionality to keypress and keydown and those work great, but not in IE.

Unfortunately my users are mostly state workers so they are forced to use IE, does anyone know a workaround?

Here is my code:

$("div.error_editor select.refReason").live({
    'change': function() {
        var text = $(this).find(":selected").text();
        $(this).parent().siblings("span").toggle();
    },
    'keypress': function() {
        $(this).change();
    }
});

ED开发者_开发技巧IT: It appears this also doesn't work in Chrome, but works fine in Firefox

I found a solution that works in IE and Chrome, I changed keypress to keyup

$("div.error_editor select.refReason").live({
    'change': function() {
        var text = $(this).find(":selected").text();
        $(this).parent().siblings("span").toggle();
    },
    'keyup': function() {
        $(this).change();
    }
});

Have you tried attaching the keydown event to the document instead of the select?

$("div.error_editor select.refReason").live({
    "focus": function() {
        var $select = $(this);

        // Use event namespacing for clean removal
        $(document).bind("keypress.selectmenu", function() {
            $select.change();
        });
    },
    "blur": function() {
        $(document).unbind("keypress.selectmenu");
    }
});