Question

I noticed that change() can be triggered for a <select> even if the option was not changed.

See my jsfiddle example.

Changing the selection will change the text input displayed. However (and I do know it’s a bit of stretch) if you:

• select the drop down by clicking on its label Selection:
• press down on the keyboard (assuming Show A was selected)
• then select Show A with the mouse pointer it will trigger change().

Is there an easy workaround for this (right now I’m thinking of using a variable to keep track what the last selection was upon change())?

EDIT:
It seems it is a Chrome-specific problem. I was able to fix the problem by using a variable to keep track of what the last selected item was. I guess this a bug left for the jQuery/Chrome developers.

Answer 1

I would store the current value as data on the element (rather than a variable) like this:

$('#variable').data('currentval', $('#variable').val()).change(function() {
    var t = $(this);
    if (t.data('currentval') != t.val()) {        
        $(this).data('currentval', $(this).val());
        $('#listA').toggle('fast');
        $('#listB').toggle('fast');
    }
});

http://jsfiddle.net/emMx6/2/