JQuery change event not firing from keyboard?

Question

I have this dropdown , I want to warn / write something when the value in it is changed. What happens when I click the dropdown button with the mouse and select any other value, a change event occurs. But when the focus is in dropdown , and I click the up and down arrow, it changes the value in the drop-down list, but the event does not fire, and now a warning appears. Here is the code

 <select id="drpDay" name="drpDay" style="background-color: white;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7" selected="selected">7</option> </select> </br> <select id="drpMonth" name="drpMonth" style="background-color: white;"> <option value="Jan">Jan</option> <option value="Feb">Feb</option> <option value="Mar">Mar</option> <option value="Apr">Apr</option> <option value="May">May</option> <option value="Jun">Jun</option> <option value="Jul">Jul</option> <option value="Aug">Aug</option> <option value="Sep">Sep</option> <option value="Oct">Oct</option> <option value="Nov" selected="selected">Nov</option> <option value="Dec">Dec</option> </select> </br> <label id="lbl" text="" width="auto">adsf</label> 

js

 $('#drpDay, #drpMonth').change(function(event) { alert(event.which); $('#lbl').text('change ' + event.which + ' and ' + $(event.target).attr('id')); }); 

Here's the script http://jsfiddle.net/2NBPx/4/

I want that when changing the value in the event selection field, pressing the up and / or down arrow, I want this event to be fired. Why don't they shoot, and how do I get it to change from the keyboard?

Answer 1

Bind it to the keyboard and change it like this: http://jsfiddle.net/2NBPx/6/

 $('#drpDate, #drpMonth').on('change keyup',function(event) { if($(this).data('last') !== $(this).val()){ $(this).data('last', $(this).val()); $('#lbl').text('For change ' + event.which + ' and you ' + $(event.target).attr('id')); } }); 

UPDATE: triggered only on an actual change.

Answer 2

The following ensures that the change event is triggered when the selection is changed using the keyboard or mouse.

 var prevValue = null; $('#drpDay').change(function() { console.log('changed'); prevValue = this.value; }); $('#drpDay').keyup(function() { if(prevValue != this.value) { $(this).trigger('change'); } }); 

Check out this demo : http://jsfiddle.net/ZCxe8/

Answer 3

Which browser are you using?

In my Chrome and IE9, the script you provided works fine with the keyboard.

Answer 4

You can combine the change event and keyup . If an event handler should do its job only when the value has really changed, you will have to add some more logic to it (remember the old value, compare, act, ...)

 $('#drpDay, #drpMonth').on("change keyup", function(event) { //... });