当使用向上/向下箭头在 <select> 中移动时运行函数

Question

我有一个这样的下拉菜单：

<select id="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

如果我想在用户更改他们的选择时运行某些东西，jQuery's .change() 很容易。但是，众所周知，如果用户激活了 <select> 并且只是通过向上/向下箭头（或其他键盘导航方法）移动选项，这将不起作用。

这对我的用例来说是个问题。即使使用向上/向下箭头查看不同的选项，我也需要根据所选值触发事件。

我不是第一个遇到这个问题的人。 Here's a discussion of this issue 基本上说如果你想在所有浏览器中处理这种情况，你必须寻找按键。这里的其他类似问题也有类似的答案。但是......它不起作用，我将在下面说明。

似乎解决此问题的最简单方法是使用jQuery's .keypress() 来注意<select> 何时处于活动状态并按下某个键。像这样的：

<select id="test">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<div id="log">

<script>
  var log = $("#log");
  var select = $("#test");
  select.change(function () { log.append(select.val() + "<br>"); });
  select.keypress(function () { log.append(select.val() + "<br>");; });
</script>

You can try it out here.

我在 Chrome 25（Ubuntu 12.10 和 Windows XP）、Firefox 19（Ubuntu 12.10）和 IE 7（Windows XP）中进行了测试，这是我手头仅有的浏览器。

我的代码在除 Firefox 之外的所有应用中都运行良好。在我的示例中，单击下拉菜单两次以在菜单关闭的情况下将其选中，然后按“下、下、下”（移动到 2、3 和 4）和“上、上、上”（移动到 3、 2 和 1)，您将看到以下输出：

2
3
4
3
2
1

太好了，完美。但在 Firefox 中，执行完全相同的操作会输出：

1
2
3
4
3
2

它落后了一个条目。输出的值是前一个值，而不是当前值。这是个问题。

有什么解决办法吗？

Answer 1

在 FireFox 中 change 事件在 kepress 事件之后触发，您可以使用 keyup 代替 keypress：

select.keyup(function () { 
    log.append(this.value + "<br>"); 
});

http://jsbin.com/ezalav/3