Javascript selecbox.options數組？

Question

從我所瞭解的option中彈出的元素select HTML中的元素是一個數組。
所以基本上我想要做的是返回一個數組字符串，用逗號分隔。

試圖做selecbox.options.join(',');，但得到了一個錯誤，它不支持;任何人有一個想法爲什麼？

Answer 1

這不是一個數組。這是一個對象。它是「陣列狀」

從http://api.jquery.com/jQuery.each/可以遍歷或者：

遍歷對象和數組。 長度屬性（例如函數的 自變量對象）的數組和類似數組的對象被迭代 數字索引，從0到length-1。 其他對象通過它們的 命名屬性進行迭代。

每個HTML Option element有一個值和一個文本和一些更多的屬性。

一個簡單的for循環可用於

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); 
} 

通過typeracer發佈將返回HTMLOptionElements數組，它仍然需要繞在或映射得到的值和文本

這裏Array.apply是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

你可以加入字符串數組，而是一個選項不是一個字符串，它與各種樣值和文本屬性的對象。它應該用來加入？

你只需編寫一個循環來追加你想要的所有值。

或者使用庫並使用一些each（）函數來遍歷選項。

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循環，而不是更短但更難看;

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）集合。您可以像對數組一樣遍歷它的元素，並將集合的成員推送到真實數組。

對於記錄：在所有的瀏覽器，但IE 9 <可以使用[].slice.call(selecbox.options);到集合快速轉換到一個數組。

因此，一個跨瀏覽器的方式，以一個節點列表集合轉換成數組是：

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，其全體的陣列的特徵，因此可以被描述爲陣列狀。一個NodeList沒有Array所具有的方法，但您可以使用call或apply這些方法。 你的情況，你可以調用join方法是這樣的：

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

最簡潔的解決方案是這樣的：

Array.apply(null, selectbox.options) 

Array.apply使用第一個參數作爲上下文調用Array構造函數（即this ）和第二個參數是任何類似數組的對象（MDN reference）。

我們通過null作爲第一個參數，因爲我們沒有試圖調用特定對象上的方法，而是調用全局構造函數。

所以一般來說，

Array.apply(null, A) 

將創建一個包含任何「陣列狀」對象A的元素的合適的陣列。