实现表单选中选项数组时触发TypeError错误，寻求解决办法

错误原因 #

document.getElementsByClassName('form-select') 和 document.querySelectorAll('select[class="form-select"]') 返回的是元素集合（分别是HTMLCollection和NodeList类型），不是单个DOM元素。集合本身没有addEventListener方法，直接调用就会触发TypeError。

修正方案 #

需要遍历所有目标select元素，为每个元素单独绑定change事件；同时优化选中值的收集逻辑，直接通过select元素的value属性获取选中值更简洁可靠。

完整代码 #

HTML

<html>
  <body>
    <form>
      <select class="form-select">
        <option>one</option>
        <option>two</option>
      </select>
      <select class="form-select">
        <option>three</option>
        <option>four</option>
      </select>
    </form>
  </body>
</html>

CSS

.form-select{
   width: 100px;
}

JavaScript

// 获取所有class为form-select的select元素
const selects = document.querySelectorAll('.form-select');

// 遍历每个select，绑定change事件
selects.forEach(select => {
  select.addEventListener('change', collectSelectedValues);
});

// 收集所有选中值的函数
function collectSelectedValues() {
  const selectedArray = [];
  // 遍历所有select，收集选中的value
  selects.forEach(select => {
    selectedArray.push(select.value);
  });
  console.log('当前所有选中值：', selectedArray);
}

// 可选：页面加载时先执行一次，获取初始选中值
collectSelectedValues();

代码说明 #

1. 事件绑定：通过querySelectorAll获取所有目标元素，用forEach遍历为每个元素添加change事件监听，确保任意select变更都会触发逻辑。
2. 值收集逻辑：直接访问select元素的value属性，它会自动返回当前选中option的value（如果option没设置value，默认返回文本内容），比querySelectorAll('option:checked')更高效，也避免了多个select下的选中option冲突问题。
3. 初始值获取：页面加载时调用一次收集函数，能拿到默认选中的初始值，属于可选需求。

内容的提问来源于stack exchange，提问作者Jeroen Swets