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

基础下拉菜单用标签包裹即可，需设name属性以确保表单提交；推荐设value，默认选中加selected；disabled有效且禁用交互与提交，readonly对无效。

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

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

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

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

为什么 disabled 和 readonly 行为不一样

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

• 真要“只读但保持样式”，得用 JS 拦截 click 或 focus，再配合 pointer-events: none CSS
• 如果只是临时禁用，优先用 disabled，别试图 hack readonly
• disabled 的 <select></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> </select>

常见错误：Uncaught TypeError: Cannot set Property 'value' of NULL

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

立即学习“前端免费学习笔记（深入）”；

• 检查 HTML 里是否漏了 id="mySelect"，仅靠 name 是不够的
• JS 要么放在