最稳的起步方式是手写静态 <option>，动态填充需保值再重绘，表格中 <select> 必须嵌在 <td> 或 <th> 内，multiple 时需用 selectedOptions 读取值。
直接写死 <option> 是最稳的起步方式
静态选项就老老实实手写 <option>，别图省事用 JS 拼字符串塞进 <select> 的 innerHTML——旧版 IE 和 Safari 可能触发两次 change 事件，用户点一下却执行两遍逻辑。
必须保证每个 <option> 都有 value 属性，否则提交时可能传空字符串或直接传显示文本（浏览器行为不一致）；value 建议用英文、数字或短 ID，避免中文、空格、特殊符号，防止 URL 编码污染或后端解析失败。
默认选中项只靠 selected 属性，多个 selected 也只认第一个；如果想“不选任何项”作为初始态，加一个 <option value="">-- 请选择 --</option> 并设它为 selected。
动态填充时要保值再重绘
从 API 加完数据再插入 <option>，最容易丢掉用户已经手动选但还没提交的值。不是清空再 append 就完事了。
立即学习“前端免费学习笔记（深入）”；
- 先缓存当前
select.value，哪怕它是空字符串或不在新列表里 - 用
select.replaceChildren(...)（现代浏览器）或循环select.appendChild(opt)插入新<option>，别用innerHTML = '...' - 插完立刻恢复：
select.value = savedValue；如果savedValue不在新选项中，select.value会自动变为空字符串，这时可额外判断并提示
表格里放 <select> 必须嵌在 <td> 或 <th> 内部
常见失效原因是把 <select> 直接写在 <tr> 里，或者包在 <div> 中再塞进单元格——<select> 不是 <tr> 的合法子元素，浏览器会把它移到表格外，导致点击无响应、JS 查不到、表单不提交。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
多行表格中，每行 <select> 的 name 要能区分上下文：简单场景用 name="row_1_status"，批量处理常用 name="status[]"（PHP）或 name="items[0].status"（JSON 表单习惯），确保后端能按行映射。
移动端点击区域小？加 style="min-width: 120px; height: 36px;"，别依赖默认尺寸；禁用某一项用 <option disabled>，别用 pointer-events: none——后者不阻止聚焦，也不被屏幕阅读器识别。
multiple 属性会让下拉变成多选列表，行为完全不同
加了 multiple 后，控件不再以“点击展开”形式出现，而是显示为固定高度的滚动列表，默认可见 4 行（可通过 size 属性调整），用户需配合 Ctrl/Cmd 键多选。
读取值的方式也变了：select.value 只返回第一个选中项，必须用 select.selectedOptions 遍历；JS 批量取值得写成 Array.from(select.selectedOptions).map(opt => opt.value)。
别给 multiple 下拉框设 selected 属性来“默认全选”——它不会生效；如需初始化多选，得用 JS 显式设置 option.selected = true，且必须在 DOM 渲染完成后操作。
真正难的不是怎么加选项，而是选项变了之后，如何让已选状态不丢、不崩、不误导用户。尤其在表格动态行 + 异步加载 + 多选混合的场景里，DOM 更新和状态同步稍一错位，用户就发现“刚选的没了”。
