Question

以下是控制台的一些输出，说明了我的问题

var a=document.createElement("select"); <ENTER>
undefined

a.appendChild(document.createElement("option"));  <ENTER>
<option></option>

a
<select>…</select>

a.options
[<option></option>]

a.options[0];
<option></option>

到目前为止，这么好。但现在

我输入a.options.，我要输入forEach但我注意到每个都没有列出。

 a.options.forEach(function() {});
VM1048:2 Uncaught TypeError: a.options.forEach is not a function
    at <anonymous>:2:11
    at Object.InjectedScript._evaluateOn (<anonymous>:905:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
    at Object.InjectedScript.evaluate (<anonymous>:694:21)

然而a.options看起来像一个数组

forEach绝对适用于数组，没有错误。

a=[1,2];
[1, 2]
typeof a
"object"
a.forEach(function(){});
undefined

我猜选择框的选项可能不是一个数组..所以它们是什么？

我已经听说过＆＃39;的论点＆＃39;伪阵列..我想也许是一个选择框的选项＆＃39;是那样的？ /某些与数组语法相似的对象？

Answer 1

因为options 不是数组;它是HTMLCollection。因此，不具有forEach函数成员。

HTMLCollection接口表示元素的通用集合（类数组对象）（按文档顺序），并提供从列表中进行选择的方法和属性。

可以将call与Array.prototype.forEach一起使用，因为HTMLCollection类似于数组¹：

Array.prototype.forEach.call(options, function ..)

¹ HTMLCollection接口具有length属性，允许通过索引器进行位置访问。

Answer 2

user2864740 给出的答案非常好。

我将举例说明如何根据提供的解决方案访问选项并在控制台中显示所有选项的文本内容：

var select = $('#selector_here');
Array.prototype.forEach.call(select.options, function(option, index) {
  console.log('option ' + (index + 1) + ':', option.textContent);
  /* do some required magic here */
});

为什么我不能在选择框的选项上做每一个？

2 个答案: