why doesn't the jquery change event fire when i use the up or down arrows on a select?

Question

I am listening to the change event of a select dropdown using jquery and the livequery plugin.

$(".myDropdown").livequery("change", function () {
});

one thing i noticed (i am using firefox) is that

The event handler doesn't fire from hitting the up and down arrows when i have the select focused (the up and down arrow DO change the entries)

Why doesn't the change event fire when i move the arrows key up and down and is there a recommendation or workaround for this?

Answer 1

If what Malvolio says is true, then that should work

$(".myDropdown").livequery("change", function () {
   // your event handler
}).livequery("keypress", function() { 
   $(this).trigger("change");
});

http://jsfiddle.net/tW6Su/2/ as proof

Answer 2

I suppose I'll summarize.

If you click an item in the select box you are changing it. If you go downward through the select box by keying through it is not selected until you press enter, click off or tab away. I suppose this differs slightly from browser to browser, but essentially the selection occurs on something like a "i'm completely done with this form field and moved away now" event.

If you would like the result to be more immediate you could either trigger the change event like this:

$("select").live("keypress",function(){
    $(this).trigger("change");
});

If you would like that to occur on all form fields try this selector: $(":input select textarea")

Answer 3

This following code (on Firefox 3.6 anyway) agrees with the OP and disagrees with the commenters:

$('body').append('<select/>').find('select')
    .append('<option>one</option)')
    .append('<option>two</option>')
$('body').find('select').keypress(function() { 
    console.log('keypress: ' + $(this).val()); })

Whenever you hit an arrow key, a changed value is printed to the log.

Answer 4

Change events are not on fired until the element loses focus, even though you are changing the value (as Malvolio proved). The following code snippet will manually fire the change event when any key is pressed:

$("select").on("keypress",function(){
    $(this).trigger("change");
});