HTML原生select的multiple属性仅控制是否允许多选，不支持最大选择数量限制；必须用JavaScript监听change事件动态控制选中项数量，并需针对iOS Safari降级处理。
multiple 属性本身不提供最大选择数量限制——HTML 原生 select 没有 maxselections、limit 或类似标准属性。这是常见误解的源头：很多人以为加了 multiple 就能配“最多选 3 个”，其实不能。
为什么原生 select 不支持 max selection
HTML 规范中，multiple 是纯布尔开关，只控制“是否允许多选”，不参与数量约束。浏览器实现也完全不解析任何数值型参数（比如 multiple="3" 或 multiple max="3"）——这些写法会被忽略或当成无效属性。
-
multiple="3"❌ Safari、Firefox、Chrome 全部无视，仍允许无限多选 -
max="3"❌ 非标准属性，对select无意义（它属于input[type=number]） - 试图用
required+ 自定义验证 ❌ 只能拦提交，无法实时禁用选项
用 JavaScript 实现选中数量限制
必须靠 JS 监听 change 事件，在用户操作后主动检查并干预。关键点不是“阻止点击”，而是“还原超出的部分”：
- 监听
select.addEventListener('change', handler)，别用click—— 多选可能跨多次交互完成 - 在 handler 中用
Array.from(select.selectedOptions).length获取当前选中数 - 若超过上限（如 3），遍历
select.options，把最后选中的那些设为option.selected = false - 注意：不要直接修改
select.value，它只影响第一个选中项，且会触发额外 change
示例逻辑（限制最多 3 个）：
立即学习“前端免费学习笔记（深入）”；
const select = document.querySelector('select[multiple]');
const MAX = 3;
select.addEventListener('change', () => {
const selected = Array.from(select.selectedOptions);
if (selected.length > MAX) {
// 从最后选中的开始取消，保留前 MAX 个
selected.slice(MAX).forEach(opt => opt.selected = false);
}
});
移动端和 iOS Safari 的特殊处理
iOS Safari 根本不支持原生 multiple 的多选交互——无论你 JS 控制得多严密，用户点开后仍是单选弹窗。这意味着：
- JS 限数量逻辑在 iOS 上根本不会执行（因为 change 事件只在单选后触发一次）
- 不要把这套限制逻辑当作跨端通用方案
- 真要保体验，得降级：用
input[type=checkbox]+ CSS 模拟下拉，或引入 tom-select、Choices.js 这类不依赖原生select的库
最易被忽略的一点：限制逻辑必须考虑用户取消选项的操作——比如已选 3 个，再点第 4 个时取消掉第 1 个，而不是粗暴清空所有再重选。否则交互会显得反直觉。
