如何使用 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']);

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