Question

I have a handler associated with a <select> input’s change event using jQuery:

$('#myList').change(function () {
   //...
});

When the user Tabs to the input and begins typing (without clicking to open the dropdown list), different browsers behave differently.

• In Firefox, the change event won’t fire until the user either presses Enter or Tab, or in some other way changes focus away from the select list.
• In IE and Chrome, the change event is fired the moment the user types something that causes the item in the select list to change.

Because my change function performs an AJAX request, I would prefer to avoid having my function do anything while the user is typing or using the arrow keys to select a choice. However, I still want the change event to fire if the user selects a particular dropdown element with the mouse, or if the user hits the enter key. In other words, I’d like IE and Chrome to behave like Firefox.

Is there any (ideally simple) way to get the behavior I’m looking for?

Answer 1

EDITED:

This should handle all of your requirements – http://jsfiddle.net/yfQ3V/4/

HTML:

<select data-value="one">
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>
<span></span>

JS:

var $select = $('select');
var $span = $('span');

var onChange = function () {
    setText();
};

var onKeyDown = function () {
    $select.off('change');
    var keyCode = e.keyCode || e.which;

    if(keyCode == 13 || keyCode == 9) {
        $select.on('change', onChange).change(); 
    }
};

var onBlur = function () {
    if($select.val() != $select.data('value')) {
        setText();
    }
};

var setText = function () {
    var val = $select.val();
    $select.data('value', val);
    $span.text(val + ' - ' + new Date());   
};

$select.on('change', onChange)
       .on('keydown', onKeyDown)
       .on('blur', onBlur);