前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库HTML select size 属性 下拉与列表框
HTML表单与输入

select 的 size 大于 1,就能同时选多个吗?

size 决定 <select> 可见多少行;设为大于 1 通常呈现列表框,但仍是单选。要同时选择多个 <option>,必须另写 multiple。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#表单与输入#表单
先看核心答案读代码示例
理解线索

外观与选择规则分开

  1. size指定列表中可见的选项行数
  2. multiple允许多个选项同时选中
  3. selectedOptions返回当前被选中的选项集合

不同浏览器对默认 size 和原生控件外观的呈现有差异,不要用它推断业务选择规则。

核心回答

先记住这个答案

<select size="4"> 通常把四行选项直接显示成列表框,但默认仍只能选中一项。size 控制可见行数,不改变选择数量;multiple 才允许同时选中多项。需要取多选结果时不能只读 select.value,它只代表一个当前值,应遍历 selectedOptions。

  • size 控制可见选项行数
  • size > 1 不自动变多选
  • multiple 才开启多选
  • 多选值要从 selectedOptions 读取

四行列表也可以单选

地区列表若选项较少,直接展示几行比反复打开下拉更方便。此时只设置 size,用户仍只能选一个城市;想选多个配送地区才加 multiple。

可见行数与多选分开HTML
<label for="region">配送地区</label>
<select id="region" name="region" size="4">
  <option value="north">北区</option>
  <option value="south">南区</option>
  <option value="east">东区</option>
  <option value="west">西区</option>
</select>

四个选项同时可见,但选择北区后再点南区,北区会取消。加上 multiple 后才进入多选交互;桌面上常要用修饰键或键盘方式选择多项,界面应给出操作提示。 size 影响的是原生控件呈现,不应拿它作为判断选择数据是否为数组的条件。业务代码应直接检查 multiple 和实际选中项。

取值要按模式处理

单选时读取 select.value 通常就够了。多选时这个属性并不能给出所有结果,应使用 Array.from(select.selectedOptions, option => option.value) 收集每个选项。

如果多选表单按原生方式提交,同一个字段名可能出现多个值;服务端解析也要支持这种情况。不要只在前端展示上变多选,却让后端仍按单个字符串读取。

size="4" 控制列表同时显示的行数,并不自动开启多选。单选列表仍然只能保留一个选中项;加上 multiple 后才允许同时选择。由于列表框和下拉菜单的外观会受浏览器、系统与 CSS 影响,页面不要把“用户一定看得见四行”当作布局保证。列表有很多项时还要考虑键盘操作、明确的 <label>,以及移动端原生选择器可能采用完全不同的交互界面。

列表框里的键盘操作不一定和下拉选择器完全一样:方向键移动当前选项,多选时还可能需要组合键保留已有选择。页面可以给出一句简短操作提示,但不要硬编码某个平台的快捷键作为唯一方式。若只为展示四条静态信息而写 size="4",却没有真实选择需求,普通列表比 <select> 更合适,也不会给用户造成“这些项可以提交”的错觉。

回答前,多想一步

容易答错的地方

以为 size="4" 表示最多选四项
数字表示可见行数,不是最大选择数量。
多选仍只读 select.value
它不会返回完整的选中值集合。用 selectedOptions 遍历。
试着用自己的话回答

面试官还会怎么问?

如何同时显示多行又只允许单选?

设置大于 1 的 size,不加 multiple。

多选值按原生表单怎样提交?

多个选中选项可能以同名字段分别提交,服务端应按重复字段或数组处理。

multiple 能用于所有表单控件吗?

它主要适用于支持多选的控件,例如 <select> 和文件输入,不能任意加到文本框就得到多选。

从一道题,走向一组知识

把知识连起来

表单与输入

表单里的 tabindex 怎么改变 Tab 键顺序?

键盘操作列表框要遵循控件原生焦点和选项导航方式。

表单与输入

搜索框用 type=search,比普通 text 多了什么?

文本输入类型的差异与列表框是否多选无关。

参考资料

  • HTML:表单与输入参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 四行列表也可以单选
  3. 取值要按模式处理
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑