Accessible select change listener

by debugwand

HTML

<select id="demo" name="demo">
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>

JavaScript

var evts = "",
    currentFoo = $("#demo").val();
//accessibility workaround: onchange is good for non-ie; keydown, click and blur is good for ie (but not for chrome)
//unfortunately we cannot detect this with feature support so must rely on browser support
if ($.browser.msie) {
    evts = "keydown click blur";
}
else {
    evts = "change";
}
$("#demo").on(evts, foo);


$("#demo").on("change", foo);

function foo(e) {
    var id;
    if (e.type !== "keydown" || (e.which === 13 || e.which === 32)) {
        id = $(e.target).val();
        if (id !== this.currentFoo) {
            this.currentFoo = id;
            alert(id);
        }
    }
}