如何用JavaScript保存select选项值？代码getElementsByClassName调用失败求助

一、你的循环代码为什么没生效？ #

你写的document.getElementsByClassName('op.e.target.value')犯了一个基础错误：getElementsByClassName()的参数必须是纯类名字符串，你把类名op和事件相关的e.target.value混在一起传进去了，浏览器根本找不到这个奇怪的类名元素。

修正后的代码如下，直接传入类名op即可：

const values = [];
// 遍历所有带op类的选项元素
for (let node of document.getElementsByClassName('op')) {
  values.push(node.value);
}
// 打印结果看看
console.log('所有选项的value值：', values);

二、如何用e.target.value保存select选项的值？ #

e.target.value一般用于监听select元素的切换事件，当用户改变选中的选项时，通过事件对象e可以直接拿到当前选中选项的value值，然后保存到变量里。

完整示例： #

HTML结构

<!-- 一个包含op类选项的select -->
<select id="mySelect">
  <option class="op" value="apple">苹果</option>
  <option class="op" value="banana">香蕉</option>
  <option class="op" value="orange">橙子</option>
</select>

JavaScript代码

// 定义变量用于保存选中的值
let selectedOptionValue = '';

// 获取select元素
const selectEl = document.getElementById('mySelect');

// 监听select的change事件（用户切换选项时触发）
selectEl.addEventListener('change', function(e) {
  // e.target就是当前触发事件的select元素，它的value就是选中选项的value
  selectedOptionValue = e.target.value;
  console.log('当前选中的选项value：', selectedOptionValue);
});

额外说明 #

• 如果是想一次性收集所有op类选项的value值，用第一种循环方法；
• 如果是要实时获取用户选中的那个选项的value，就用事件监听的方法，这也是实际开发中更常用的场景。

内容的提问来源于stack exchange，提问作者Andrew Jons