最稳的起步方式是手写静态 ，动态填充需保值再重绘，表格中 必须嵌在 或 内，multiple 时需用 selectedoptions 读取值。

直接写死 <option></option> 是最稳的起步方式

静态选项就老老实实手写 <option></option>，别图省事用 JS 拼字符串塞进 <select></select> 的 innerHTML——旧版 IE 和 Safari 可能触发两次 change 事件，用户点一下却执行两遍逻辑。

必须保证每个 <option></option> 都有 value 属性，否则提交时可能传空字符串或直接传显示文本（浏览器行为不一致）；value 建议用英文、数字或短 ID，避免中文、空格、特殊符号，防止 URL 编码污染或后端解析失败。

默认选中项只靠 selected 属性，多个 selected 也只认第一个；如果想“不选任何项”作为初始态，加一个 <option value="">-- 请选择 --</option> 并设它为 selected。

动态填充时要保值再重绘

从 API 加完数据再插入 <option></option>，最容易丢掉用户已经手动选但还没提交的值。不是清空再 append 就完事了。

• 先缓存当前 select.value，哪怕它是空字符串或不在新列表里
• 用 select.replaceChildren(...)（现代浏览器）或循环 select.appendChild(opt) 插入新 <option></option>，别用 innerHTML = '...'
• 插完立刻恢复：select.value = savedValue；如果 savedValue 不在新选项中，select.value 会自动变为空字符串，这时可额外判断并提示

表格里放 <select></select> 必须嵌在 <td> 或 <code><th> 内部<p>常见失效原因是把 <code><select></select> 直接写在 <tr> 里，或者包在 <code><div> 中再塞进单元格——<code><select></select> 不是 <tr> 的合法子元素，浏览器会把它移到表格外，导致点击无响应、JS 查不到、表单不提交。<p>多行表格中，每行 <code><select></select> 的 name 要能区分上下文：简单场景用 name="row_1_status"，批量处理常用 name="status[]"（PHP）或 name="items[0].status"（JSON 表单习惯），确保后端能按行映射。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

移动端点击区域小？加 style="min-width: 120px; height: 36px;"，别依赖默认尺寸；禁用某一项用 <option disabled></option>，别用 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 更新和状态同步稍一错位，用户就发现“刚选的没了”。