添加multiple属性的select框，JavaScript获取仅返回单个选中值问题

当给<select>添加multiple属性后，直接通过.value只能获取到第一个选中的选项值，这是原生JavaScript的默认行为。要获取所有选中的选项值，需要遍历<select>的选项集合，筛选出选中项并提取它们的value。

方法一：使用数组方法（简洁写法） #

// 获取目标select元素
const selectElement = document.getElementById('affectedwaferid');
// 收集所有选中项的value
const selectedValues = Array.from(selectElement.options)
  .filter(option => option.selected)
  .map(option => option.value);
// 展示结果（可根据需求替换为其他处理逻辑）
alert(selectedValues.join(', '));

方法二：使用传统循环（兼容性更广） #

如果你更习惯传统的循环写法，或者需要兼容旧环境，可以用这种方式：

const selectElement = document.translot.affectedwaferid;
const selectedValues = [];
// 遍历所有选项
for (let i = 0; i < selectElement.options.length; i++) {
  const option = selectElement.options[i];
  // 判断选项是否被选中
  if (option.selected) {
    selectedValues.push(option.value);
  }
}
// 输出结果
alert(selectedValues.join(', '));

补充说明 #

如果不需要默认的空值选项（<option value="">Select Quantity</option>）被包含在结果里，可以在筛选时增加判断条件：

// 排除空值的写法
const selectedValues = Array.from(selectElement.options)
  .filter(option => option.selected && option.value !== '')
  .map(option => option.value);

内容的提问来源于stack exchange，提问作者Oliver Queen