如何从数组中具有相同类的html返回值

Question

我在html中创建了一个select标签，并为每个选项提供了不同的值，例如

<option class="op" value="3"></option>
<option class="op" value="4"></option>
<option class="op" value="5"></option>

我正在尝试使用js将这些值放入数组中。

首先，我调用该类并存储在var = values中，然后使用for循环尝试将值放入数组中，但出现此错误（i.value不可迭代）

var values = [...document.getElementsByClassName('op')];

for (i = 0; i< values.length; i++) {
    var originalValues = [...i.value];
    console.log(originalValues)
}

预期输出：originalValues = [1,2,3,...]

Answer 1

const inputs = document.getElementsByClassName('op')
for (const input of inputs) {
    console.log(input.value)
}

Answer 2

jQuery使这变得非常简单。按类别.op抓取选择标记，然后用> option抓住所有的子选项，然后循环遍历它们。

var values = []
$('.op > option').each(function(index, option){
    values.push($(option).text())
})
console.log(values)

最快的入门方法是在html的body标记之后添加此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 3

您收到的错误消息是完全正确的。由getElementsByClassName返回的HTMLCollection是不可迭代的，因此您不能在其上使用扩展语法（...）。如果要对其进行迭代，则需要在其上使用for...of循环或标准for循环，如下所示：

let values = [];
for (let node of document.getElementsByClassName('op')) {
  values.push(node.value);
}

或

let nodes = document.getElementsByClassName('op');
let values = [];
for (var i = 0; i < nodes.length; i++) {
  let node = nodes[i];
  values.push(node.value);
}