Как вернуть значения из html с тем же классом в массиве

Question

Я сделал тег выбора в html и дал каждой опции разные значения, подобные этому <option class="op" value="3"></option> <option class="op" value="4"></option> <option class="op" value="5"></option> Я пытаюсь поместить эти значения в массив, используя js.

Сначала я вызываю класс и сохранить в var = values, а затем с помощью for l oop Я попытался поместить значения в массив, но получил эту ошибку (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

Одна строка, нет jQuery!

const values = [...document.getElementsByClassName('op')].map(op => op.value)

В основном он создает новый (реальный) массив из HTMLCollection, делая доступным метод .map (), который выполняет определенную операцию c на каждый элемент и возвращает новый массив.

Кстати, ошибка исходит из i.value в вашем l oop. i - это число и не имеет свойства .value, поэтому i.value равно undefined, следовательно, не повторяется и не может использоваться с синтаксисом распространения.

Возможно, это то, что нужно сделать:

const htmlCollection = document.getElementsByClassName('op');
const originalValues = []

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

Answer 2

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

Answer 3

Добавьте id в условие Select точно так же;

<select name="opps" id="opps">
    <option class="op" value="3"></option>
    <option class="op" value="4"></option>
    <option class="op" value="5"></option>
</select>

var assignedId = new Array();
$("#opps option").each(function()
{
    assignedId.push($(this).val());
});
console.log(assignedId);

Answer 4

Jquery делает это довольно просто. Возьмите тег select по его классу, .op, затем возьмите все его дочерние параметры с помощью > option и просто l oop поверх них.

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

Самый быстрый способ начать работу с jquery - добавить это сразу после тега body в вашем html

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

Answer 5

Полученное вами сообщение об ошибке совершенно верно. HTMLCollection, возвращаемый getElementsByClassName, не повторяется, поэтому вы не можете использовать для него синтаксис распространения (...). Если вы хотите перебрать его, вам нужно будет использовать на нем for...of l oop или стандартный for l oop, например:

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