Jquery capture when changing change list value without changing event

Question

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

The problem is that most users are people with data entry, so they actively use the keyboard when entering data, and the change list selection event fires only when the focus leaves the input, if it is done from the keyboard. I tried adding the same functionality to keypress and keydown , and they work fine, but not in IE.

Unfortunately, my users are mostly government employees, 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(); } }); 

EDIT: this doesn't seem to work in Chrome either, but works fine in Firefox

Answer 1

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(); } }); 

Answer 2

Have you tried attaching a keydown event to a document instead of a selection?

 $("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"); } });