使用向上/向下箭头在<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的.change()很容易。 然而，众所周知，如果用户具有<select>激活并且仅使用向上/向下箭头（或其他键盘导航方法）移动选项，则这将不起作用。

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

我不是第一个遇到这个问题的人。 以下是对此问题的讨论 ，基本上如果要在所有浏览器中处理此方案，则必须查找按键。 其他类似的问题也有类似的答案。 但是......它不起作用，我将在下面说明。

看似最简单的解决方法是使用jQuery的.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>

你可以在这里试试。

我在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