如何使用JavaScript选中多选select元素的多个选项

当<select>开启multiple属性后，无法通过直接赋值value的方式选中多个选项，需要逐个设置对应<option>元素的selected属性。要选中值为0、2、4的选项，你可以用以下两种方式实现：

方法一：精准定位目标选项设置选中状态 #

先获取目标<select>元素，再分别找到对应值的<option>并设置selected为true：

const weekdaySelect = document.querySelector("#weekday");

// 可选：先清空已有选中状态
Array.from(weekdaySelect.options).forEach(opt => opt.selected = false);

// 设置需要选中的选项
["0", "2", "4"].forEach(targetValue => {
  const option = weekdaySelect.querySelector(`option[value="${targetValue}"]`);
  if (option) option.selected = true;
});

方法二：遍历所有选项批量设置 #

通过遍历所有<option>，判断其值是否在目标列表中来设置选中状态，适合需要频繁切换多组选中项的场景：

const weekdaySelect = document.querySelector("#weekday");
const targetValues = new Set(["0", "2", "4"]);

Array.from(weekdaySelect.options).forEach(option => {
  option.selected = targetValues.has(option.value);
});

补充说明 #

当<select>未开启multiple时，value属性对应唯一选中项的值；但开启multiple后，value仅返回第一个选中项的值，且赋值单个value只会选中该选项，因此必须通过操作<option>的selected属性来实现多选。

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