2012-05-23 17 views
23

注:この質問はKnockout.jsとは関係ありませんが、代わりに約selectedOptionsという属性の<select>要素です。selectedOptionsが壊れていますか... ...?

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

私はそれがJavaScript開発者のための便利な機能だと思う:これは参照です。サポートはかなり限られていますが、とにかく成長しています。 Chrome、Opera、Safariは既にそれをサポートしているはずです。

問題は、どのように動作するのかわかりません。この動作は非常に簡単で、選択したオプションのライブコレクションを生成する必要がありますが、そうでない場合があります。ユーザーがオプションを選択するたびにselectedOptionsが変更されると思いますか?違う。クロムDEV 21と安定した19が奇数の挙動を持っている一方で、常には関係なく、あなたが後に何をすべきか、選択していない最初の値を返し、オペラ11.64この例では

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

:私は、テストケースを用意しました。次の手順を実行します。

  1. 「1」を選択します。出力とコンソールの両方で "One"が得られます。
  2. Ctrlキーを押しながら「2つ」を選択します。コンソールでは、 "One、Two"を出力しますが、出力ではまだ "One"です。
  3. 「Three」も選択してください。コンソールでは "One、Two、Three"、出力では "One、Two"です。
  4. 「2」のみを選択します。コンソールでは、出力 "Two ,,"(2つのコンマに注意)で "Two"を取得します。

しかしあなたがconsole.log行をコメントアウトした場合、あなたは常に正しい出力を得ます。あなたは2つの命令を交換した場合、またはあなたが区切られた文字列に値を格納した場合は、こののように、コンソールと出力の両方で期待される動作を取得することができます:

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

だから、私はおよそselectedOptions何かが欠けています?すぐにこのプロパティに頼るのは早すぎるのでしょうか?おそらくバグのある実装ですか? console.logはChromeで問題を作成していますか? HTMLCollectionについて知らないことがありますか?

Safariがインストールされていないため、誰かの動作を確認できますか?

UPDATE 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プレビューでは、このプロパティをサポートする必要があります。しかし、

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返します。これは、FirefoxとIE8-11ための簡単な回避策です。

更新日28/5/2014:Firefoxがをr25から実装し始めたようです。

+1

私の研究から、はい、それは壊れていて、[ファイアフォックスでも実装されていませんでした](https://bugzilla.mozilla.org/show_bug.cgi?id=596681)。私は答えとして書くことができましたが、おそらくこれまでのことすべてを知っているでしょう... – gdoron

+1

はい、この質問を投稿する前であってもバグページを読みましたが、 'selectedOption' *は'