Javascript 选择 box.options 到数组？

Question

据我所知，在 HTML 中填充 select 元素的 option 元素是一个数组。
所以基本上我想要做的是返回一个用逗号分隔的数组字符串。

尝试执行 selecbox.options.join(',');，但出现不支持的错误；有人知道为什么吗？

Answer 1

它不是数组。它是一个 HTMLCollection。它是“类数组”

2022 年，即 Internet Explorer 11 停产前一周，最简单的普通 JavaScript 解决方案是使用 spread和 Array map

const opts = document.querySelectorAll("select option"); 
// we can use forEach on the resulting HTMLCollection 
// but map needs to be spread to array
const vals = [...opts]
  .map(el => el.value); 
console.log(vals);

<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><br/> 
The above select has the following option values:<br/>
<span id="result"></span>

---

与 IE11 兼容的旧答案

来自 http://api.jquery.com/jQuery.each/哪个可以迭代:

Iterate over both objects and arrays.Arrays and array-like objects with alength property (such as a function'sarguments object) are iterated bynumeric index, from 0 to length-1.Other objects are iterated via theirnamed properties.

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

Array.apply typeracer 发布的将返回一个 HTMLOptionElements 数组，它仍然需要循环或映射以获取值和文本

这里有几个版本会返回相同的结果。

This fiddle will run in IE11 too

var vals, sel = document.querySelector("select"), show=function(vals) {$("#result").append("[" + vals.join("][") + "]<hr/>");}
var supportsES6 = function() {try{new Function("(a = 0) => a");return true;}catch (err) {return false;  }}();


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

// ES6 JS using spread and map of HTMLOptionElements - note the fat arrow and el
if (supportsES6) 
  document.write(`<script>

  vals = [...sel.options].map(el => el.value);

show(vals);
<\/script>`
);

<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><br/> 
The above select has the following option values:<br/>
<span id="result"></span>