javascript - 如何通过键盘激活选择元素的下拉菜单？

Question

我的 HTML 中有一个选择元素：

<select id="dropdown">
    <option value="1">First</option>
    <option value="2">Second</option>
</select>

它呈现为一个下拉菜单，当用户单击它时，（惊喜！）会下拉。为了仅通过键盘使用该页面，我希望使其在用户按下某个键时下拉菜单。

$('body').keypress(function(event) {
    var key = String.fromCharCode(event.which);
    if (key == 'a') {
        $('#dropdown').doSomething(); // ?
    }
});

我发现最好的方法是调用focus(). 它允许通过键盘选择值，但它不会下拉菜单。有没有办法让菜单下拉？

Answer 1

使用 Chrome 浏览器 (28.0)，您可以强制执行如下鼠标事件：

var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
$("#dropdown").get(0).dispatchEvent(e);

请参阅此工作演示，不要忘记在按“a”之前单击主体以将焦点放在它上面