先记住这个答案
<select size="4"> 通常把四行选项直接显示成列表框,但默认仍只能选中一项。size 控制可见行数,不改变选择数量;multiple 才允许同时选中多项。需要取多选结果时不能只读 select.value,它只代表一个当前值,应遍历 selectedOptions。
size控制可见选项行数size > 1不自动变多选multiple才开启多选- 多选值要从
selectedOptions读取
四行列表也可以单选
地区列表若选项较少,直接展示几行比反复打开下拉更方便。此时只设置 size,用户仍只能选一个城市;想选多个配送地区才加 multiple。
<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> 和文件输入,不能任意加到文本框就得到多选。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。