javascript - keydown event in drop down list

Question

I am trying to create a Drop down list, that when a user holds the SHIFT key, it will select the same index on all other drop down lists.

Currently, I am doing the following:

$(document).on('keyup keydown', function (e) { shifted = e.shiftKey });
$(document).on('change', '.report_info select', function (e) {
    if (shifted) {
        //Code to change other drop down lists.
    }
});

This only works if you press and hold the shift key before you enter the drop down list. If you are inside the DDL and press the shift key, the keyup/keydown event will not fire and shifted will remain false

Is there any way to catch the keyup/keydown event while a dropdownlist is focused?

Edit:

Looks like it might be an issue with Chrome only, Just tried adding the following, and it works in Firefox and IE, but not Chrome:

$(document).on('keyup keydown', 'select', function (e) {
    shifted = e.shiftKey;
});

Here is a fiddle of it not working in chrome: http://jsfiddle.net/ue6xqm1q/4

Answer 1

I think @judgeja's response may be your best bet. I'm posting this as an "answer" instead of a comment, because I've done my own research to determine that absolutely no event gets fired when a select element is open in Chrome.

See Fiddle: http://jsfiddle.net/m4tndtu4/6/

I've attached all possible event handlers (I think) to the input element and both select elements.

In Chrome, you'll see many events fire when working with the input element, but you'll see no events fire when working in the first select element when it is open.

Interestingly, events do fire in Chrome if the select element has the multiple attribute or size>1.

In Firefox, you'll see events firing on all three elements.

Outside @judgeja's suggestion, your best bet may be to simulate the select element.