下拉菜单基本结构为包裹多个，value决定提交值、text为显示文字；用selected设默认项，disabled可禁用单选项或整个控件。
下拉菜单的基本结构怎么写
用 <select></select> 包住一组 <option></option> 就能生成原生下拉菜单，浏览器自动处理展开、聚焦、键盘导航等交互。不需要 JS 也能工作，但得注意几个细节：
-
<select></select>默认只显示一个选项，点击才展开；加multiple属性可多选（此时表现更像列表框） - 每个
<option></option>的value属性决定表单提交时发送的值，text（标签内文字）是用户看到的内容 - 没设
value的<option></option>，提交时会把文本内容当值发出去，容易出编码或空格问题
如何让某个选项默认被选中
用 selected 属性标记，只能有一个生效（除非加了 multiple）。别用 JS 动态设 selectedIndex 或 value 来“模拟默认”，那样在页面刚加载时可能闪一下空白或错位。
<select name="city"> <option value="">请选择城市</option> <option value="bj">北京</option> <option value="sh" selected>上海</option> <option value="gz">广州</option> </select>
注意：selected 是布尔属性，写成 selected="selected" 也行，但只写 selected 更常见。
禁用某一项或整个下拉框怎么操作
禁用单个 <option></option> 用 disabled，它仍会显示但不可选；禁用整个 <select></select> 也是用 disabled，这时整个控件变灰且无法聚焦。
-
<option disabled>暂不开放</option>—— 灰色显示，不能点，也不会被提交 -
<select disabled></select>—— 整个下拉框失效，连展开动作都没了 - 服务端渲染时如果某项本该禁用但漏了
disabled，前端用 JS 补上容易被绕过，关键逻辑必须后端校验
样式受限时怎么微调外观
原生 <select></select> 的内部箭头、滚动条、聚焦边框等很难用 CSS 彻底重绘，尤其在 Safari 和旧版 Edge 上。真要高度定制，常见做法是隐藏原生控件，用 <div> + <code><ul></ul> 模拟，再用 JS 同步值到一个隐藏的 <select></select> 或 <input type="hidden"> 里保表单兼容性。
- 纯 CSS 方案：可用
appearance: none去掉默认样式，再手动加背景箭头图，但下拉面板仍不可控 - 不要给
<select></select>设height或line-height来强行撑高，会导致 iOS 上点击区域错位 - 移动端测试必做：iOS Safari 对
<select></select>的点击热区、字体缩放、键盘唤起都有特殊行为
原生下拉最稳妥，但一旦涉及品牌色、圆角、图标、搜索过滤这些，就得接受“模拟控件 + 隐藏真实控件”的折中方案，而不是硬啃 CSS。
