一个打开（聚焦）的“选择”元素在Chrome中表现非常奇怪的问题

Question

这是一个 <select> 元素：

<select>
    <option>Hello</option>
    <option>Banana</option>
    <option>Balloon</option>
    <option>Something</option>
    <option>Potato</option>
    <option>Cleveland</option>
</select>

这是一小段JavaScript代码（一个jQuery的“ready”处理程序）：

$(function() {

    function foo() {
        var s = $('select').find(':selected');
    }

    setInterval(foo, 200);
});

这是此问题的jsfiddle链接。.

该处理程序设置了一个间隔计时器，每200毫秒查找当前选定的<select>的<option>，并且不对其进行任何操作。当我在Chrome（13.0.782.112）中运行这个fiddle，并点击<select>元素，然后尝试选择一个条目时，选择突出显示会一直跳回第一个选定的元素。当然，我可以单击显示的任何<option>元素，那样就可以工作，然后下次再做同样的事情。

现在，如果我更改计时器处理程序，使其不使用jQuery来查找当前选定的<option>元素，如下所示：

$(function() {

    function foo() {
        var select = $('select')[0];
        var s = $(select.options[select.selectedIndex]);
    }

    setInterval(foo, 200);
});

然后我不再看到效果。

Firefox没有这样做。我还没有尝试Safari。

个人认为这里有些东西做错了。是Chrome？jQuery？

编辑 - 还有一个细节 - 我在Linux上运行Chrome。我会立即尝试Windows。（编辑在Windows中相同。）

- Pointy

---

Chrome和Safari在Windows 7上都以相同的方式出现故障。 - thirtydot

@thirtydot -- 谢谢！我已经将“webkit”添加到标签中。 - Pointy

我也可以复制这个问题（Chrome 13/Win7），但我想问一下，为什么您不能只是使用 $('select').change() 来捕获更改事件并在回调中处理，而不是使用间隔？ - Jimmy Sawczuk

另外，我喜欢你随机的<option>值。 :) 有没有新的Lorem Ipsum？ - Jimmy Sawczuk

@Jimmy Sawczuk -- 我可以在这里清楚地做到这一点，而且我可能也可以在我的实际情况下做到这一点。问题是，我正在“观察”整个表单的变化。我可以绑定所有元素的“change”，但我试图通过简单轮询来避免IE的一些愚蠢的“change”错误。通常，这不会引起任何问题。 - Pointy

Answer 1

将代码更改为：

function foo() {
    var s = $('select option:selected');
}

setInterval(foo, 200);

我不确定为什么会出现这种情况，但我猜测与jQuery中伪选择器的工作方式有关。它们被实现为与选择器名称配对的函数（在这种情况下是“selected”）。因此，它们针对上下文中的每个可能的元素运行（不仅仅是那些可能被选择的元素）。

也许有一些奇怪的幽灵元素会被执行"selected" 伪选择器，而这并不应该发生。解决方案是在执行伪选择器之前将上下文限制为选项。这总是一个好习惯。

- Wyatt

---

这对我有用，很好！（我把它放在jsFiddle上测试了一下） - Jimmy Sawczuk

是的，这绝对可以停止怪异现象。我仍然很好奇是否有聪明人能够找出问题的根源 :-) - Pointy

这确实可以工作，但是 $('select').find('option:selected') 仍然会出错，而 $('select :selected') 则可以正常工作。我的意思是，这似乎与在选择器中添加 option 无关。问题似乎出在 .find() 上。 - thirtydot