HTML 的 `<select>` 多选和大小属性怎么用？

结论：<select multiple> 让下拉框变成"可多选的列表框"，size="N" 控制同时显示几行选项；两者职责不同——multiple 决定能否多选（行为），size 决定露出几行（外观），可以独立使用。

<select multiple> 和 size 属性有什么区别？

结论：multiple 是布尔属性，写了就是多选；size 是正整数，表示同时可见的选项行数。四个组合的实际表现如下：

注意第三行：multiple 存在且没写 size 时，HTML 规范规定的默认显示行数是 4，这就是为什么你的多选框"自己长高了"。size="0" 是无效值，最小取 1；size 不限制可选数量，multiple 也不改变行数。

<select name="fruits[]" multiple size="6">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="cherry">樱桃</option>
</select>

<select multiple> 怎么获取选中的值？

结论：用 select.selectedOptions 取全部选中项，不要用 select.value——它只返回第一个被选中的值，多选场景会静默丢数据。

const select = document.querySelector('#fruits');
// 正确：拿到所有选中值
const values = [...select.selectedOptions].map(o => o.value);
// 错误：只返回第一个选中项的 value
console.log(select.value);

配套要点：

• select.options 是全部选项集合，option.selected 是布尔值，两者都可读写。
• 表单提交时是多个同名参数，形如 fruits=apple&fruits=banana；后端按语言约定用 name="fruits[]"（PHP / Express 等）接收数组。
• 一个都没选时，浏览器不会提交这个字段，后端拿到的是 undefined 而不是空数组，需要做兜底。
• required 属性对多选 select 有效：必须至少选中 1 项，否则表单校验失败。
• 用户操作方式：Windows / Linux 按住 Ctrl 点击切换单项，macOS 用 Command；Shift 点击选连续范围；焦点在框内时 Ctrl + A 全选。

size 属性有哪些坑？

结论：size 只改显示效果，不改变选择逻辑；它的高度在不同浏览器里的实际像素值不一样，不要用它来对齐布局。

具体注意 3 点：

1. 非多选状态下写 size="5" 仍是单选：用户点第二个选项，第一个会自动取消。想多选必须加 multiple。
2. 移动端基本忽略 size 和列表框渲染：iOS Safari 和 Android Chrome 会弹出全屏选择面板，用"完成 / 确认"按钮回填，size 几乎无效。
3. option 的 CSS 支持不一致：给 <option> 设 background-color、padding 在 Windows 的原生下拉里会被忽略，别指望用它做精细样式。想控制整体高度直接写 height 更可靠。

什么时候不该用 <select multiple>？

结论：需要按住 Ctrl 才能多选，是公认的可用性短板；面向移动端、或选项超过 7 个、或需要展示额外说明信息的场景，优先用一组 <input type="checkbox"> 替代。

判断标准可以量化：选项 ≤ 7 个、目标用户以桌面端键盘操作为主，用 <select multiple> 最省代码；选项多、以触屏为主、或需要"全选 / 反选"这类批量操作，checkbox 组的点击成本更低，也对屏幕阅读器更友好——多选 select 的键盘路径必须依赖 Ctrl + 方向键，无障碍支持参差不齐。

总结：multiple 管"能选几个"，size 管"看得见几行"，两者互不替代；取值统一走 selectedOptions，别忘了未选中时不提交字段这个坑；移动端优先考虑 checkbox 组。