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

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

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

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

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

<select name="city">
  <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" 控制可见行数

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

常见错误：Uncaught TypeError: Cannot set property 'value' of null

这个错通常不是 <select> 本身的问题，而是 JS 找元素时没找到，比如 ID 写错、脚本执行太早（DOM 还没加载完）、或者用了 getElementById 却忘了加 id 属性。

• 检查 HTML 里是否漏了 id="mySelect"，仅靠 name 是不够的
• JS 要么放在 前，要么用 DOMContentLoaded 包一层
• 用 querySelector('select[name="city"]') 比硬记 ID 更稳，尤其动态生成的表单
• 设值前先判空：if (el) el.value = 'sh'

实际项目里最常被忽略的，是 <select> 的 value 和显示文本分离这件事——后端传来的“选项ID”和前端展示的“中文名”混在一起改，一不小心就导致提交空值或错值。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。