2012-05-23 15 views
23

नोट: इस प्रश्न के पास Knockout.js से कोई लेना देना नहीं है, लेकिन यह selectedOptions के बजाय <select> तत्वों की विशेषता है।चुना गया विकल्प टूट गया है या ...?

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

मुझे लगता है कि जावास्क्रिप्ट डेवलपर्स के लिए एक अच्छी सुविधा है: इस संदर्भ है। समर्थन काफी सीमित है, लेकिन यह वैसे भी बढ़ रहा है। क्रोम, ओपेरा और सफारी पहले से ही इसका समर्थन करना चाहिए।

समस्या यह है कि मैं यह नहीं समझ सकता कि यह कैसे काम करता है। व्यवहार काफी सरल होना चाहिए, चयनित विकल्पों का लाइव संग्रह देना, लेकिन यह मामला नहीं है। आप कल्पना करेंगे कि selectedOptions हर बार उपयोगकर्ता एक विकल्प चुनता है, है ना? गलत। मैं एक परीक्षण का मामला तैयार किया है:

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

इस उदाहरण में, ओपेरा 11.64 हमेशा चयन किया है, कोई फर्क नहीं पड़ता कि आप के बाद क्या कर पहले मान देता है, जबकि क्रोम 21 देव और 19 स्थिर एक अजीब व्यवहार । निम्न चरणों का पालन करें:

  1. 'वन' चुनें। आउटपुट और कंसोल दोनों में आपको "वन" मिलता है, जैसा कि अपेक्षित है।
  2. Ctrl का उपयोग करके 'दो' भी चुनें। कंसोल में आपको "वन, टू" मिलता है, आउटपुट में यह अभी भी "वन" है।
  3. 'तीन' भी चुनें। कंसोल में यह "वन, टू, थ्री" है, आउटपुट में यह "वन, टू" है।
  4. अब केवल 'दो' चुनें। कंसोल में आपको "दो" मिलते हैं, आउटपुट में "दो," (दो कॉमा नोटिस)।

हालांकि, अगर आप बाहर टिप्पणी console.log लाइन, आप हमेशा सही उत्पादन मिलता है। अगर आप दो निर्देश स्वैप आप दोनों सांत्वना और उत्पादन में अपेक्षित व्यवहार प्राप्त कर सकते हैं, या यदि आप एक अलग स्ट्रिंग में मूल्य की दुकान, इस में के रूप में: तो

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

, मैं कुछ selectedOptions के बारे में याद आ रही है ? क्या यह इस संपत्ति पर भरोसा करने के लिए बहुत जल्द है, शायद एक छोटी गाड़ी कार्यान्वयन है? क्या console.log क्रोम में समस्या पैदा कर रहा है? क्या मुझे कुछ ऐसा नहीं है जो मुझे HTMLCollection एस के बारे में नहीं पता?

मेरे पास सफारी स्थापित नहीं है, क्या कोई इसका व्यवहार देख सकता है?

अद्यतन 18/2/2013: मुझे नहीं पता कि चीजें कब बदल गई हैं, लेकिन क्रोम 24.0.1312.57 और ओपेरा 12.14 दोनों ठीक काम करने लगते हैं। फ़ायरफ़ॉक्स 18.0.2 और इंटरनेट एक्सप्लोरर 10 को अभी भी संपत्ति को लागू करना है।

अद्यतन 17/9/2013: फ़ायरफ़ॉक्स 24 और आईई 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: ऐसा लगता है जैसे फ़ायरफ़ॉक्स ने R25 के बाद selectedOptions लागू करना शुरू किया।

+1

मेरे शोध से, हाँ यह टूटा हुआ है, और [फ़ायरफ़ॉक्स में भी लागू नहीं किया गया था] (https://bugzilla.mozilla.org/show_bug.cgi?id=596681)। मैं इसे उत्तर के रूप में लिख सकता हूं, लेकिन आप शायद अब तक यह सब जानते हैं ... – gdoron

+1

हां, मैंने इस प्रश्न को पोस्ट करने से पहले भी उस बग पेज को पढ़ा है, लेकिन मैं उम्मीद कर रहा था कि चूंकि 'चयनित विकल्प' * को * क्रोम और ओपेरा में