Javascript selecbox.options到数组？

Question

根据我的理解option,select在HTML中弹出元素的元素是一个数组.
基本上我想做的是返回一个用逗号分隔的数组字符串.

试图做selecbox.options.join(',');,但得到一个错误,它不支持; 有谁知道为什么？

Answer 1

它不是一个数组.这是一个对象.它是"阵列般的"

来自http://api.jquery.com/jQuery.each/,它可以迭代:

迭代对象和数组.具有length属性的数组和类似数组的对象(例如函数的参数对象)由数字索引迭代,从0到length-1.其他对象通过其命名属性进行迭代.

每个HTML Option元素都有一个值和一个文本以及一些其他属性.

可以使用简单的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发布的Array.apply将返回一个HTMLOptionElements数组,它仍然需要循环或映射以获取值和文本

以下是一些将返回相同版本的版本.

这个小提琴也将在IE11中运行

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>

Answer 2

最简洁的解决方案是:

Array.apply(null, selectbox.options)

Array.applyArray使用第一个参数作为上下文(即this)调用构造函数,第二个参数是任何类似数组的对象(MDN引用).

我们传递null第一个参数,因为我们不是试图在特定对象上调用方法,而是调用全局构造函数.

所以总的来说,

Array.apply(null, A)

将创建一个包含任何"类数组"对象元素的正确数组A.

Answer 3

扩展运算符使其变得非常简单 ( [ ...ElementList ])。\n
\n
\n因此，对于您的情况，您可以执行以下操作：\n
\n arr = document.getElementById(\'store-locator-region\')\n
\n
\n然后使用扩展运算符将 html select 元素转换为对象数组：\ n
\n newArr = [...arr]\n
\n
\n然后迭代对象数组以获得最终数组：\n
\n countryList = newArr.map(a => a.value)\n(97)\xc2\xa0["XE", "AL", "DZ", "AD", "AR", "AM", etc..]

\n

Answer 4

要将所有值放入数组中:

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 5

selecbox.options是一个集合 ( nodeList)。您可以像处理数组一样迭代其元素，并将集合的成员推送到真正的数组。

郑重声明：在除 IE<9 之外的所有浏览器中，您可以使用[].slice.call(selecbox.options);¹快速将集合转换为数组。

因此，将 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(options)or [...options]。

¹或Array.prototype.slice.call([some collection])