HTML下拉框必须用标签手动添加选项，需嵌套在内；文本内容写在标签之间，value属性决定提交值，selected指定默认选中；动态添加推荐用options.add(new Option())，避免innerHTML拼接；移动端建议用+JS模拟以提升体验。
直接用 <option></option> 标签往 <select></select> 里写内容
HTML 下拉框本身不带选项，必须手动添加 <option></option> 标签，每个标签代表一个可选条目。浏览器会自动把它们渲染成下拉列表项。
常见错误是只写了 <select></select> 却忘了嵌套 <option></option>，结果页面显示空下拉框，点开什么都没有。
-
<option></option>必须放在<select></select>内部，不能放外面 - 文本内容写在
<option></option>开始和结束标签之间，比如<option>北京</option> - 如果想默认选中某一项，给对应
<option></option>加selected属性：<option selected>上海</option>
value 属性决定表单提交时实际发送的值
用户看到的是 <option></option> 标签里的文字，但表单提交或 JS 读取时，真正起作用的是 value 属性。两者可以不同。
比如用户看到“男”，但后端收到的是 gender=1，靠的就是 value="1"。
立即学习“前端免费学习笔记（深入）”；
- 没写
value时，浏览器会自动把标签内文本作为默认值 - 写了
value就以它为准，哪怕为空：<option value="">请选择</option> - 避免在
value里用空格、中文或特殊符号，尤其对接 API 时容易出编码或解析问题
动态加选项？JS 操作 options 集合最稳
静态 HTML 写死选项适合固定内容（如省份列表）。如果选项来自接口或随用户操作变化，就得用 JavaScript。
别用 innerHTML += 拼字符串追加 <option></option>，容易清空已有选项或破坏事件绑定。推荐直接操作 selectElement.options 集合。
const sel = document.getElementById('city');
sel.options.add(new Option('深圳', 'shenzhen'));
sel.options.add(new Option('杭州', 'hangzhou'));
-
new Option(text, value)构造函数最简洁，第二个参数可选，默认同 text - 要插到指定位置，用
sel.options.add(option, index)，比如add(opt, 0)插到开头 - 清空所有选项：直接设
sel.length = 0，比循环删快且安全
移动端下拉体验差？别依赖原生 <select></select>
iOS 和 Android 对原生 <select></select> 的样式控制极弱，滚动卡顿、无法搜索、不支持多选（除非显式加 multiple），很多业务场景下它只是个“兜底方案”。
如果你需要自定义外观、键盘搜索、分组、异步加载，或者统一 PC/手机体验，就别硬改原生标签，改用 <div> + <code><ul></ul> + JS 模拟下拉逻辑，配合 ARIA 属性保无障碍。
原生 <select></select> 真正适合的场景只剩：简单表单、对兼容性要求高、开发时间紧、不需要精细交互控制。
