2012-05-23 4 views
23

참고 :이 질문은 Knockout.js와는 아무 관련이 없습니다. 대신 selectedOptions 속성 약 <select> 개 요소에 관한 것입니다.selectedOptions가 손상 되었습니까? 아니면 ...입니까?

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

내가 자바 스크립트 개발자를위한 좋은 기능이라고 생각 :이 참조입니다. 지원은 매우 제한적이지만 어쨌든 성장하고 있습니다. Chrome, Opera 및 Safari가 이미이를 지원해야합니다.

문제는 작동 방식을 파악할 수 없다는 것입니다. 이 동작은 선택한 옵션의 라이브 콜렉션을 생성하는 아주 간단해야하지만, 그렇지 않은 경우가 있습니다. 사용자가 옵션을 선택할 때마다 selectedOptions이 변경된다고 생각 하시겠습니까? 잘못된. 크롬 dev에 21 안정적인 (19)가 이상한 동작을하는 동안, 항상에 상관없이 당신이 후에 무엇을 선택하지 첫 번째 값을 반환, 오페라 11.64를이 예에서

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

: 나는 테스트 케이스를 준비했습니다 . 다음 단계를 수행하십시오.

  1. '하나'를 선택하십시오. 출력과 콘솔 모두에서 예상대로 "One"을 얻습니다.
  2. Ctrl을 사용하여 '두'를 선택하십시오. 콘솔에서 "One, Two"를 얻습니다. 출력에서 ​​여전히 "One"입니다.
  3. '3'도 선택하십시오. 콘솔에서는 "One, Two, Three"이고, 출력에서는 "One, Two"입니다.
  4. 이제 '2'만 선택하십시오. 콘솔에서 출력 "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은 여전히이 속성을 구현해야합니다.

업데이트 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 반환이 파이어 폭스와 IE8-11위한 쉬운 해결 방법입니다.

업데이트 28/5/2014 : Firefox가을 구현하기 시작한 것처럼 보입니다. r25 이후.

+1

내 연구에서 그렇습니다. 깨졌으며 [firefox로 구현되지 않았습니다] (https://bugzilla.mozilla.org/show_bug.cgi?id=596681). 나는 대답으로 글을 쓸 수 있었지만, 아마도 지금까지 모든 것을 알고있을 것이다 ... – gdoron

+1

예,이 질문을 게시하기 전에도 버그 페이지를 읽었지만,'selectedOption' *은'