javascript - selectedOptions 是否损坏或...？

Question

注意:这个问题与 Knockout.js 无关，而是关于 selectedOptions <select> 的属性元素代替。这是引用:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#dom-select-selectedoptions

我认为这对于 Javascript 开发人员来说是一个很好的功能。支持相当有限，但无论如何都在增长。 Chrome、Opera 和 Safari 应该已经支持它。

问题是我不知道它是如何工作的。该行为应该非常简单，生成所选选项的实时集合，但事实并非如此。你会想象selectedOptions每次用户选择一个选项时都会发生变化，对吧？错误的。我准备了一个测试用例:

http://jsfiddle.net/f39cC/5/

在此示例中，Opera 11.64 始终返回选定的第一个值，无论您之后执行什么操作，而 Chrome 21 dev 和 19 stable 则有奇怪的行为。执行以下步骤:

1. 选择“一个”。正如预期的那样，在输出和控制台中您都会得到“One”。
2. 使用 Ctrl 键也选择“二”。在控制台中你得到“One,Two”，在输出中它仍然是“One”。
3. 也选择“三”。在控制台中它是“一，二，三”，在输出中它是“一，二”。
4. 现在仅选择“两个”。在控制台中，您会得到“Two”，输出为“Two,,”(注意两个逗号)。

但是，如果您注释掉 console.log行，您总是会得到正确的输出。如果交换两条指令，或者将值存储在单独的字符串中，则可以在控制台和输出中获得预期的行为，如下所示:

http://jsfiddle.net/f39cC/2/

那么，我是否遗漏了有关 selectedOptions 的信息？ ？现在依赖这个可能有错误实现的属性是否为时过早？是console.log在 Chrome 中创建问题？难道还有什么我不知道的HTMLCollection是吗？

我没有安装 Safari，有人可以检查它的行为吗？

更新 18/2/2013:我不知道什么时候发生了变化，但 Chrome 24.0.1312.57 和 Opera 12.14 现在似乎都运行良好。 Firefox 18.0.2 和 Internet Explorer 10 仍需实现该属性。

更新 17/9/2013:Firefox 24 和 IE 11 预览版仍需支持该属性。对于 Firefox 和 IE8-11，这是一个简单的解决方法:

Object.defineProperty(HTMLSelectElement.prototype, "selectedOptions", {
    get: (function() {
        try {
            document.querySelector(":checked");
            return function() {
                return this.querySelectorAll(":checked");
            };
        } catch (e) {
            return function() {
                if (!this.multiple) {
                    return this.selectedIndex >= 0
                            ? [this.options[this.selectedIndex]] : [];
                }
                for (var i = 0, a = []; i < this.options.length; i++)
                    if (this.options[i].selected) a.push(this.options[i]);
                return a;
            };
        }
    })()
});

对于 IE8，它仅返回 Array而不是NodeList不过。

更新 28/5/2014:Firefox 似乎开始实现 selectedOptions自 r25 起。

Answer 1

看来这个问题比一个简单的 bug 还要深一些。 WebKit 和 Presto 都未能正确支持 selectedOptions 的事实向我们暗示，它取决于该属性应该是 HTMLCollection 的事实。

现在，HTMLCollection 具有其实时行为，因为当 DOM 发生某些情况(类的更改、节点的删除等)时，渲染引擎会使它们失效。但是选项的 selected 属性不会触发集合的失效，从而使其完全不可靠。

我想这里的问题是要采用一种新的方式使实时集合失效，并且它可能不是很简单，因为它可能会影响 DOM 解释和处理的整个方式。

目前，Chrome 21.0.1180.4 已删除该属性。