基础下拉菜单用标签包裹即可，需设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: noneCSS - 如果只是临时禁用，优先用
disabled，别试图 hackreadonly -
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 要么放在
