是selectedOptions破或...？

Question

注意：這個問題與Knockout.js無關，但是它的屬性<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/

在這個例子中，歌劇11.64 總是返回選擇，無論你以後做什麼的第一個值，而Chrome瀏覽器21 Dev和19穩定有一個奇怪的行爲。執行以下步驟：

1. 選擇「一個」。如預期的那樣，在輸出和控制檯中你都會得到「一個」。
2. 也可以使用Ctrl選擇'Two'。在控制檯中你會得到「一，二」，在輸出中它仍然是「一」。
3. 也請選擇'Three'。在控制檯中它是「一，二，三」，在輸出中是「一，二」。
4. 現在只選擇'Two'。在控制檯中你會得到「Two」，輸出「Two ,,」（注意兩個逗號）。

然而，如果你註釋掉console.log行，你總能得到正確的輸出。你可以在控制檯和產量預期的行爲，如果你換了兩個指令，或者如果你存儲值在分隔的字符串，如本：

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

所以，我失去了一些關於selectedOptions ？是否過早依賴這個屬性，可能有一個錯誤的實現？ console.log在Chrome中創建問題？有什麼我不知道HTMLCollection s？

我沒有安裝Safari，有人可以檢查它的行爲嗎？

更新18/2/2013：我不知道什麼時候事情發生了變化，但兩者的Chrome 24.0.1312.57和Opera 12.14，似乎現在的工作很好。 Firefox 18.0.2和Internet Explorer 10仍然需要實施該屬性。

UPDATE 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的開始，因爲R25實施selectedOptions。