本文讲解如何在 元素的 onchange 事件中准确捕获用户当前所有已选中的选项值，避免因直接读取 .value 导致的重复、遗漏或顺序错乱问题。
本文讲解如何在 `
在使用 <select multiple></select> 实现多选功能时，一个常见误区是直接访问 element.value —— 这在单选（<select></select>）中返回当前选中项的值，但在多选场景下，它仅返回第一个被选中的 <option></option> 的值，且该行为与用户点击顺序无关，只取决于 DOM 中选项的排列顺序。这正是你观察到的现象：无论你先选 1 再选 3，还是先选 5 再选 2，value 始终返回“首个已选选项”的值（按 HTML 源码顺序），导致 myarr.push(activityValue) 不断重复添加同一个值。
要真正反映用户当前的完整选择状态，必须遍历所有 <option></option> 元素，检查其 selected 属性，并提取对应 value。现代、简洁且可靠的写法如下：
function getSeleted() {
const select = document.getElementById('activities');
const selectedValues = Array.from(select.options)
.filter(option => option.selected)
.map(option => option.value);
console.log('当前所有选中值:', selectedValues);
}✅ 关键点说明：
-
select.options是一个HTMLCollection，需转为数组（Array.from()或[...select.options]）才能使用filter/map； -
option.selected准确反映该选项当前是否处于选中状态（不受点击历史影响）； - 结果数组天然保持用户视觉上的选择顺序（即 DOM 中
<option></option>的顺序），而非点击顺序 —— 这是浏览器标准行为，也是最符合预期的逻辑； - 每次调用
getSeleted()都会重新计算全量当前选中项，无需维护外部数组或手动去重/清理。
⚠️ 注意事项：
- 不要依赖
event.target.value或全局变量累加（如原始代码中的myarr.push），这会导致状态污染和顺序失真； - 若需监听“选择变化”（如新增/取消某一项），可进一步对比前后两次
selectedValues数组，但绝大多数场景只需每次获取快照即可； - 在旧版 IE 中需用
select.selectedOptions（返回NodeList）替代上述方法，但现代项目可安全使用options + selected组合。
总结：多选下拉框的状态本质是“一组布尔标记”，而非单个值。始终通过遍历并检查 selected 属性来获取真实、实时、完整的选中集合，这是健壮前端交互的基础实践。
