size属性的作用_HTML select可见选项数量控制-html教程-PHP中文网

size属性控制select元素一次显示的选项行数，设为1是单行下拉，设为4则固定显示4行并带滚动条；常见无效原因包括未加multiple属性、父容器CSS限制、size值非法等。

size属性的作用_html select可见选项数量控制

size 属性直接控制元素在页面上**一次显示多少行选项**，不是“最多显示几个”，而是“固定展开高度能塞下几行”。设成 1 就是默认单行下拉（点击才展开），设成 4 就直接撑开显示 4 行，超出部分带滚动条。

为什么设了 `size` 却没看到多行？

常见原因有三个：

没加 multiple 属性，但浏览器对单选的渲染支持不一致——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 做“限制可选项数量”——它只影响可见行数，所有依然存在且可选（哪怕要滚着选）。

用 JS 动态切换 `size` 实现“点击展开/收起”效果

有些 UI 要求默认单行、点击后展开显示更多选项（比如展示前 5 个，其余需滚动），这时不能靠静态 HTML，得用 JS 控制 size 属性的实时值：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

<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，是历史兼容行为。所以别只信属性值，务必在目标浏览器里实测渲染效果。