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?

Pedaias

Assuming we're talking about a <select /> and not a <select multiple />: the up and down arrows do NOT change the selected entry. Write some code that console.log()s the selected entry every second or something and test it yourself. This might vary from browser to browser but the behavior you're seeing is what you should expect to see in most user-agents. – Haigh

The arrow keys don't change the value of the select, they just change the visually highlighted entry in the browser. The entry will be changed when they are done hitting the arrow keys and click away, hit enter, of (onblur any way). – Hutchins

@PaulPRO - thanks . . i just realized that . . if you move this to an answer i will select it – Pedaias

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

Eurythmic

Couldn't you do $(".myDropdown").livequery("change keypress", function () { ? – Sphygmograph

@MikeWills Tell me if I'm wrong but, livequery is a jQuery plugin github.com/brandonaaron/livequery which doesn't work like .live() which can take more than one event as you just say. – Eurythmic

I am not an expert, just asking the question as I seen this. – Sphygmograph

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")

Lozenge

:input would be a better selector for your last example. – Harbird

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.

Rabbet

...but you're listening to the keypress event, not the change event. How does that agree with the OP, who is specifically talking about the change event? – Haigh

I would agree with @@Malvolio. The argument was that the arrow keys don't change the value of the select, they only change the visually highlighted entry in the browser. However, Malvolio's code shows that this isn't true. It shouldn't matter what event he's using to trigger the check of the value, the bottom line is, He pressed an arrow key, and the value has indeed changed. Am I missing something? – Chambertin

The reason of the confusion is eventHandler. Doing this with javascript/Jquery is possible, but it is not possible using change event, because change event on a select do not listen arrow key events. On the other hand, by usnig keypress, you can catch them, as well as other key events, like searching on a selectbox by typing some letters... – Appressed

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

Harbird