सरणी में जावास्क्रिप्ट selecbox.options?

Question

जो मैं option तत्वों को समझता हूं जो HTML में select तत्वों को पॉप्युलेट करते हैं, वे एक सरणी हैं।
तो मूल रूप से मैं जो करना चाहता हूं वह एक सरणी स्ट्रिंग को वापस कर देता है जो अल्पविराम से अलग होता है।

selecbox.options.join(','); करने का प्रयास किया, लेकिन एक त्रुटि मिली जो इसकी समर्थित नहीं है; किसी को भी एक विचार है क्यों?

Answer 1

यह एक सरणी नहीं है। यह एक वस्तु है। यह "सरणी की तरह"

http://api.jquery.com/jQuery.each/ से

जिस पर पुनरावृति कर सकते हैं या तो: दोनों वस्तुओं और सरणियों से अधिक

दोहराएं। लंबाई संपत्ति (जैसे फ़ंक्शन की तर्क वस्तु) के साथ Arrays और array-like ऑब्जेक्ट्स संख्यात्मक अनुक्रमणिका, 0 से लंबाई -1 तक पुनरावृत्त होते हैं। अन्य वस्तुओं को उनके नामित गुणों के माध्यम से पुनरावृत्त किया जाता है।

प्रत्येक HTML Option element में एक मूल्य और एक टेक्स्ट और कुछ और विशेषताएँ हैं।

पाश के लिए एक सरल

vals = [] 
var sel = document.querySelector("select"); 
for (var i=0, n=sel.options.length;i<n;i++) { // looping over the options 
    if (sel.options[i].value) vals.push(sel.options[i].value); 
} 

Array.apply typeracer द्वारा पोस्ट की गई HTMLOptionElements की एक सरणी है जो अभी भी अधिक लूप में चलाया जा करने के लिए या मूल्यों पर प्राप्त करने के लिए मैप किया और ग्रंथों

यहाँ की जरूरत है वापस आ जाएगी इस्तेमाल किया जा सकता 3 संस्करण हैं जो इसे वापस कर देंगे।

var vals, sel = document.querySelector("select"), show=function(vals) {$("#result").append("[" + vals.join("][") + "]<hr/>");} 
 

 
// jQuery mapping jQuery objects - note the "this" and the .get() 
 
vals = $('select > option').map(function() {return this.value;}).get(); 
 
show(vals); 
 

 
// plain JS using loop over select options 
 
vals = []; 
 
for (var i = 0, n = sel.options.length; i < n; i++) { // looping over the options 
 
    if (sel.options[i].value) vals.push(sel.options[i].value); // a bit of testing never hurts 
 
} 
 
show(vals); 
 

 

 
// Plain JS using map of HTMLOptionElements - note the el 
 
vals = Array.apply(null, sel.options).map(function(el) { return el.value; }); 
 
show(vals);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<select> 
 
<option value="Please select">Text 0</option> 
 
<option value="one">Text 1</option> 
 
<option value="two">Text 2</option> 
 
<option value="three">Text 3</option> 
 
</select> The above select has the following option values:<br/> 
 
<span id="result"></span>

Answer 2

आप तार की एक सरणी शामिल हो सकते हैं, लेकिन एक विकल्प एक स्ट्रिंग नहीं है, यह मूल्य और पाठ की तरह गुण के सभी प्रकार के साथ एक वस्तु है। इसमें शामिल होने के लिए किसका उपयोग करना चाहिए?

आपको बस अपने इच्छित मूल्यों को जोड़ने के लिए एक लूप लिखना होगा।

या लाइब्रेरी का उपयोग करें और विकल्पों के माध्यम से लूप के लिए प्रत्येक() फ़ंक्शन का उपयोग करें।

Answer 3

एक सरणी में सभी मूल्यों को प्राप्त करने के लिए:

var options = document.getElementById('selectId').options; 
var values = []; 
var i = 0, len = options.length; 

while (i < len) 
{ 
    values.push(options[i++].value); 
} 
alert(values.join(', ')); 

फिडल:http://jsfiddle.net/garreh/64pyb/1/

---

वाह कुछ कम

अच्छी तरह से करना आप एक लंबा रास्ता लूप के लिए उपयोग कर सकते हैं, नहीं बहुत छोटा लेकिन अधिक बदसूरत;

for (var options = document.getElementById('selectId').options, 
      values, i = 0, len = options.length; i < len;i++) 
    values.push(options[i].value); 

alert(values.join(', ')); 

फिर फिर यह एक शर्म की बात है कि आप jQuery जैसी लाइब्रेरी का उपयोग नहीं कर रहे हैं।आप कर सकता है:

$('select > option').map(function() { return this.value; }).get(); 

Answer 4

selecbox.options एक (nodeList) संग्रह है। आप इसके तत्व पर पुन: सक्रिय कर सकते हैं जैसे कि आप किसी सरणी के साथ संग्रह के सदस्यों को वास्तविक सरणी में धक्का देते हैं।

रिकॉर्ड के लिए: सभी ब्राउज़रों लेकिन आईई < 9 में आप [].slice.call(selecbox.options); जल्दी से एक सरणी के लिए एक संग्रह कन्वर्ट करने के लिए उपयोग कर सकते हैं।

तो एक crossbrowser रास्ता सरणी के लिए एक nodeList संग्रह कन्वर्ट करने के लिए होगा:

function coll2array(coll){ 
    var ret = []; 
    try { 
     ret = [].slice.call(coll) 
    } 
    catch(e) { 
     for (var i =0;i<coll.length;i++){ 
      ret.push(coll[i]); 
     } 
    } 
    return ret; 
} 

[संपादित] आजकल (ES2015 और ऊपर) हम Array.from([arraylike object]) उपयोग कर सकते हैं।

या Array.prototype.slice.call([some collection])

Answer 5

select.options एक सरणी, यह एक NodeList जो एक सरणी की सुविधाओं में से कुछ साझा करता है और इसलिए तरह सरणी के रूप में वर्णित किया जा सकता है नहीं है। एक नोडलिस्ट में एरे के पास विधियां नहीं हैं, लेकिन आप call या apply उन तरीकों से कर सकते हैं। आपके मामले में आप इस तरह विधि में शामिल होने के कॉल कर सकते हैं:

var opts = yourSelect.options; 
var str = Array.prototype.join.call(opts, ','); 

वैकल्पिक रूप से आप एक ऐसी ही तकनीक

// slice returns a new array, which is what we want 
var optsArray = Array.prototype.slice.call(opts); 

Answer 6

सबसे संक्षिप्त समाधान के साथ एक सच्चे सरणी में NodeList परिवर्तित कर सकते हैं यह है:

Array.apply(null, selectbox.options) 

संदर्भ के रूप में पहले तर्क के साथ Array कन्स्ट्रक्टर को कॉल करता है (यानी this) और दूसरा तर्क जो किसी सरणी जैसी वस्तु है (MDN reference)।

हम पहले तर्क के लिए null पास करते हैं क्योंकि हम किसी विशिष्ट वस्तु पर एक विधि को कॉल करने की कोशिश नहीं कर रहे हैं, बल्कि वैश्विक निर्माता हैं।

तो, सामान्य रूप में

Array.apply(null, A) 

किसी भी "सरणी की तरह" वस्तु A के तत्वों से युक्त एक उचित सरणी पैदा करेगा।