首页 > 文章 > 前端

HTML下拉菜单怎么创建？select标签使用教程

时间：2026-04-06 16:07:20 417浏览收藏

本文深入浅出地讲解了HTML中select下拉菜单的核心用法与实战避坑指南：从零开始只需一对select和option标签即可实现原生下拉功能，强调name属性对表单提交的必要性、value值与显示文本分离的关键原则，以及selected、disabled等属性的正确使用逻辑；同时澄清readonly在select上完全无效的常见误区，详解multiple多选的兼容性陷阱（如移动端Safari行为异常、后端接收需name加[]）、JS操作时“Cannot set property 'value' of null”等高频报错的根源与解决方案，直击开发中极易被忽视却影响功能与无障碍体验的细节痛点。

HTML怎么创建下拉菜单_HTML select标签教程【操作】

怎么用 `<select>` 写一个基础下拉菜单

直接写 <select> 标签，里面套就能跑起来，浏览器自动渲染成下拉控件。不需要 JS、不需要 CSS 也能工作。

<select> 必须有 name 属性，否则表单提交时这个值不会被发送
每个推荐加 value，不加的话默认取标签内文本，但容易出编码或空格问题
想默认选中某一项，给对应加 selected 属性（不是 checked）

&lt;select name=&quot;city&quot;&gt;
  <option value="">请选择城市</option>
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
&lt;/select&gt;

为什么 `disabled` 和 `readonly` 行为不一样

disabled 让整个 <select> 不可交互、变灰、且表单提交时忽略该字段；readonly 在 <select> 上**无效**——HTML 规范根本不支持它，加了也没反应。

真要“只读但保持样式”，得用 JS 拦截 click 或 focus，再配合 pointer-events: none CSS
如果只是临时禁用，优先用 disabled，别试图 hack readonly
disabled 的 <select> 无法获得焦点，对键盘导航和屏幕阅读器都不友好，慎用于无障碍场景

多选下拉（`multiple`）要注意什么

加了 multiple 属性后，用户可以按 Ctrl（Windows）或 Cmd（Mac）多选，但 UI 表现和单选完全不同：浏览器会显示滚动列表，默认高度约 4 行，而不是下拉箭头。

必须用 name 后加 []（如 name="hobby[]"），PHP/Node.js 等后端才认得出这是数组
移动端 Safari 对 multiple 支持弱，点开会直接跳系统选择器，体验割裂
不能和 size 以外的样式强耦合，比如设 height: 100px 可能被忽略，老老实实用 size="5" 控制可见行数

&lt;select name=&quot;hobby[]&quot; multiple size=&quot;3&quot;&gt;
  <option value="read">阅读</option>
  <option value="run">跑步</option>
  <option value="code">写代码</option>
&lt;/select&gt;