Jquery Listbox Change event does not fire on Keyboard scrolling

Question

I've got a simple Listbox on a HTML form and this very basic jQuery code

    //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    });

The change event fires fine when the current item is selected using the Mouse, but when i scroll through the items using the keyboard the event is not fired and my code never executes.

Is there a reason for this behavior? And what's the workaround?

Answer 1

The onchange event isn't generally fired until the element loses focus. You'll also want to use onkeypress. Maybe something like:

var changeHandler = function() {
    $(".prashQs").addClass("hide");
    var cat = $("#selCategory :selected").attr("id");
    cat = cat.substr(1);
    $("#d" + cat).removeClass("hide");
}

$("#selCategory").change(changeHandler).keypress(changeHandler);

You'll want both onchange and onkeypress to account for both mouse and keyboard interaction respectively.

Answer 2

Sometimes the change behavior can differ per browser, as a workaround you could do something like this:

 //Toggle visibility of selected item
    $("#selCategory").change(function() {
        $(".prashQs").addClass("hide");
        var cat = $("#selCategory :selected").attr("id");
        cat = cat.substr(1);
        $("#d" + cat).removeClass("hide");
    }).keypress(function() { $(this).change(); });

You can chain whatever events you want and manually fire the change event.

IE:

var changeMethod = function() { $(this).change(); };
....keypress(changeMethod).click(changeMethod).xxx(changeMethod);

Answer 3

The behavior you describe, the change event triggering by keyboard scrolling in a select element, is actually an Internet Explorer bug. The DOM Level 2 Event specification defines the change event as this:

The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

If you really want this behavior, I think you should look at keyboard events.

$("#selCategory").keypress(function (e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 38 || keyCode == 40) { // if up or down key is pressed
     $(this).change(); // trigger the change event
  } 
}); 

Check a example here...