如何获取多选select元素中所有选中选项的取值？

首先检查你的<select>标签是否添加了multiple属性——这是实现多选的核心前提，没有这个属性的话，浏览器会将其视为单选控件，即便你视觉上能选多个，selectedOptions也只会返回第一个选中项。

正确的多选select结构示例：

<select id="multiSelect" multiple>
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
  <option value="opt3">选项3</option>
</select>

接下来提供两种获取所有选中值数组的方法：

方法1：利用selectedOptions转换数组 #

selectedOptions返回的是一个HTMLCollection对象，需要先转成数组，再提取每个选项的value：

const selectElement = document.getElementById('multiSelect');
const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);

方法2：遍历所有选项判断选中状态 #

如果需要兼容更老的浏览器，也可以直接遍历所有option元素，通过selected属性筛选：

const selectElement = document.getElementById('multiSelect');
const selectedValues = [];
for (const option of selectElement.options) {
  if (option.selected) {
    selectedValues.push(option.value);
  }
}

内容的提问来源于stack exchange，提问作者José Rojas