使用JavaScript获取selectbox中的所有值

我正在编写示例代码以获取 javascript 中选择框中的所有值。使用目标选择框的属性“options”将其获取为“HTMLCollection”，然后将其排列并进行循环处理。

获取所有值

要获取选择框中的所有值，数组“options”即“HTMLCollection”并使用“forEach”循环等。

<select id="foo">
  <option selected>select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<script>

let elm = document.getElementById( "foo" ).options;

[...elm].forEach(option => {
  console.log(option.label)
  console.log(option.value)
});


</script>

其他方法

或者，使用“Array.from”、“[].slice.call”或“Object.values”进行排列将得到相同的结果。

let elm = document.getElementById( "foo" ).options;

Array.from(elm).forEach(option => {
  console.log(option.label)
  console.log(option.value)
});

[].slice.call(elm).forEach(option => {
  console.log(option.label)
  console.log(option.value)
});

Object.values(elm).forEach(option => {
  console.log(option.label)
  console.log(option.value)
});