Question

jQuery documentation for change() says:

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

I’ve tested change() on select boxes in different browsers and it fires when the control looses focus. This makes the user feel nothing is happening when he changes options in the select box.

my solution to this is using click() event instead, but I don’t like it since the function is run with every click and the user can’t use keyboard to change options.

Is there a way to make change() fire as the documentation says.

Answer 1

use:

.bind('change click keypress', ...)

as this event would be fired more times than selection was changed (there is no ideal solution to that), you have to check if anything was changed from the last time

// check if changed
if( $(this).data('selection') != $('option:selected', this).val() ) {
    // if so, update hidden data
    (this).data('selection', $('option:selected', this).val());

    ... your code
}