在使用上/下箭头在<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

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

有什么想法如何修复它吗？

- dumbmatter

---

按键处理程序在值正式更改之前执行，这可能是原因吗？如果是这样，那么非常短的延迟可以解决问题吗？select.keypress(function () { setTimeout(function(){log.append(select.val() + "<br>"); },100}); - Steve

Answer 1

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

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

http://jsbin.com/ezalav/3

- Ram