javascript - 从javascript中的html选项标签获取所有名称值

Question

我有以下 html 代码

<select>
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button>Submit</button>

我想要的是，当我单击提交按钮时，它应该将选项标签内的所有名称值存储到一个数组中。到目前为止，我尝试了以下 js 代码，但它似乎不起作用。

document.getElementsByTagName('button').onclick = function() {
  var array = [document.getElementsByTagName('option').value];
  console.log(array);
};

知道我怎样才能做到这一点吗？提前致谢。

ps: 我对 javascript 很陌生。

Answer 1

这是解决方案。您必须遍历所有 option 元素，获取每个元素的 value 并插入数组。

function getValues() {
  var array = document.getElementsByTagName('option');
  var arr = [];
  for (var i = 0; i < array.length; i++) {
    arr.push(array[i].value)
  }
  console.log(arr);
};

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" onclick="getValues()">Submit</button>

ES6 解决方案:

function getValues() {
  var array = document.getElementsByTagName('option');
  var arr = [];
  Array.from(array).forEach(v => arr.push(v.value));
  console.log(arr);
};

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" onclick="getValues()">Submit</button>