14

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?

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 1
    Assuming we're talking about a and not a : 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. – evan Sep 16 '11 at 23:24
  • 4
    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). – Paul Sep 16 '11 at 23:29
  • @PaulPRO - thanks . . i just realized that . . if you move this to an answer i will select it – leora Sep 25 '11 at 12:38

4 Answers4

5

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

Shikiryu
  • 10,180
  • 8
  • 49
  • 75
  • Couldn't you do `$(".myDropdown").livequery("change keypress", function () {` ? – Mike Wills Jul 03 '12 at 14:57
  • @MikeWills Tell me if I'm wrong but, livequery is a jQuery plugin https://github.com/brandonaaron/livequery which doesn't work like `.live()` which can take more than one event as you just say. – Shikiryu Jul 03 '12 at 18:27
  • I am not an expert, just asking the question as I seen this. – Mike Wills Jul 03 '12 at 18:32
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")

Parris
  • 17,833
  • 17
  • 90
  • 133
1

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.

Michael Lorton
  • 43,060
  • 26
  • 103
  • 144
  • 1
    ...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? – evan Sep 17 '11 at 01:36
  • 1
    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? – Jeff Reddy Nov 21 '11 at 13:47
  • 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... – Mp0int Apr 29 '12 at 11:29
0

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