如何使用 JavaScript 批量选中多选下拉框中的选项

在 html `` 元素中，无法直接通过 `element.value = [...]` 设置多个选中项；正确方式是遍历目标 `` 元素并手动设置其 `selected` 属性为 `true`。

当 元素启用 multiple 属性后，其 value 属性仅返回第一个被选中的选项值（字符串），且赋值时仅支持单值（会自动取消其他选项的选中状态）。因此，要实现多选预设，必须操作 元素本身的 selected 布尔属性。

✅ 正确做法：批量设置 option.selected = true

以下代码可安全、高效地选中值为 "0"、"2" 和 "4" 的选项：

const targetValues = ['0', '2', '4'];
targetValues.forEach(value => {
  const option = document.querySelector(`#weekday option[value="${value}"]`);
  if (option) option.selected = true;
});

? 说明：使用 #weekday option[value="..."] 限定作用域（避免跨 select 冲突），并添加 if (option) 防御性检查，防止因值不存在导致报错。

⚠️ 注意事项

• ❌ 不要尝试 document.querySelector('#weekday').value = ['0','2','4'] —— 这会失败或仅生效于首个值；
• ✅ 若需清空所有选中项，可先调用 document.querySelectorAll('#weekday option').forEach(o => o.selected = false)；
• ✅ 若需获取当前所有选中值，推荐使用：

  const selectedValues = Array.from(
    document.querySelectorAll('#weekday option:checked')
  ).map(opt => opt.value);
  // 或更兼容的写法：
  // const selectedValues = [...document.querySelectorAll('#weekday option')].filter(o => o.selected).map(o => o.value);

? 进阶技巧：封装为复用函数

function selectOptions(selectId, values) {
  const select = document.getElementById(selectId);
  if (!select) return;
  Array.from(select.options).forEach(option => {
    option.selected = values.includes(option.value);
  });
}

// 使用示例：
selectOptions('weekday', ['0', '2', '4']);

该函数支持精确匹配与批量控制，兼顾可读性与健壮性，适用于各类多选场景。