size属性控制select元素一次显示的选项行数，设为1是单行下拉，设为4则固定显示4行并带滚动条；常见无效原因包括未加multiple属性、父容器CSS限制、size值非法等。
size 属性直接控制 <select></select> 元素在页面上**一次显示多少行选项**，不是“最多显示几个”，而是“固定展开高度能塞下几行”。设成 1 就是默认单行下拉（点击才展开），设成 4 就直接撑开显示 4 行，超出部分带滚动条。
为什么设了 size 却没看到多行？
常见原因有三个：
- 没加
multiple属性，但浏览器对单选<select size="4"></select>的渲染支持不一致——Chrome/Firefox 会显示 4 行，Safari 可能仍只显示 1 行并加箭头（行为未完全标准化）； - 父容器 CSS 限制了高度或设置了
overflow: hidden，把多出行给裁掉了； - 写了
size="0"或负数，浏览器会忽略，退回到默认值1（HTML 规范规定size必须为正整数）。
size 和 multiple 一起用的典型场景
这是提升多选体验最实际的做法：用户一眼就能看出“这不是普通下拉”，且不用点开就能看到多个选项。
-
size值建议 ≥ 3，4是较平衡的选择——太小（如2）不易察觉可多选，太大（如10）可能撑乱布局； - 如果选项总数少于
size值，所有选项都会平铺显示，无滚动条； - 移动端 Safari 对
size+multiple的支持较弱，常回退为原生单行选择器，此时size无效； - 不要依赖
size做“限制可选项数量”——它只影响可见行数，所有<option></option>依然存在且可选（哪怕要滚着选）。
用 JS 动态切换 size 实现“点击展开/收起”效果
有些 UI 要求默认单行、点击后展开显示更多选项（比如展示前 5 个，其余需滚动），这时不能靠静态 HTML，得用 JS 控制 size 属性的实时值：
立即学习“前端免费学习笔记（深入）”；
<select id="mySelect">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
<option value="6">选项六</option>
</select>
<script>
const sel = document.getElementById('mySelect');
sel.addEventListener('focus', () => sel.size = 5);
sel.addEventListener('blur', () => sel.size = 1);
sel.addEventListener('change', () => sel.size = 1);
</script>
注意：onchange 后立刻设回 1 是为了防止失焦时还留着展开态；但 iOS Safari 在 blur 时可能不触发，得额外监听 touchend 或用 setTimeout 延迟还原。
真正容易被忽略的是：即使你写了 size="1"，只要同时存在 multiple，部分浏览器（如旧版 Edge）仍会默认按 size="4" 渲染——这不是 bug，是历史兼容行为。所以别只信属性值，务必在目标浏览器里实测渲染效果。
