最可靠方式是直接操作 select 的 options 集合，如用 options.length = 0 清空、new option() 添加选项，并在 change 事件中先清空再填充，严格按 value 匹配预设选中项，同步处理禁用状态与占位符。
直接操作 select 的 options 集合最可靠
浏览器对 select 元素的 DOM 操作有明确规范，直接读写 options 集合（如 selectElement.options.length = 0 或 selectElement.add(new Option(...))）兼容性最好，不会触发意外重绘或状态丢失。用 innerHTML 清空再拼接字符串容易导致 iOS Safari 下焦点异常、已选值被重置，或在某些安卓 WebView 中丢失 selected 属性。
-
selectElement.options.length = 0是清空最快的方式，比循环remove()更简洁 - 添加新选项优先用
new Option(text, value, defaultSelected, selected)构造，它原生支持设置初始选中态，且不依赖 innerHTML 解析 - 避免用
selectElement.innerHTML = '...'替换全部选项，尤其当该select已绑定表单验证或第三方库监听时
change 事件里动态加载选项必须先清空旧内容
用户切换第一个下拉菜单后，第二个下拉菜单若不清空就直接 append() 新 option，会导致选项重复累积——这是最常被忽略的逻辑漏洞。比如用户从“A组”切到“B组”，再切回“A组”，第二级菜单会出现两套 A 组选项。
- 每次响应
change事件时，第一件事就是执行targetSelect.innerHTML = ''或targetSelect.options.length = 0 - 如果使用
document.createDocumentFragment()批量插入，仍需确保插入前已清空原有options，否则 fragment 只是追加 - 服务端返回数据后，不要假设前端已有缓存映射；即使选项值相同，也要以当前请求结果为准重建
options
用 value 匹配而非文本匹配来预设选中项
用户上次提交过表单，现在要回显数据：不能靠 option.textContent === savedValue 去找并设 selected，因为文本可能被国际化、格式化或含空格。必须用 option.value 严格比对。
- 预设选中逻辑应写在选项加载完成之后，即所有
new Option(...)添加完毕再遍历select.options - 推荐写法：
for (const opt of select.options) { if (opt.value === savedValue) { opt.selected = true; break; } } - 如果用
select.value = savedValue，仅当该value确实存在对应option时才生效；否则静默失败，不会报错也不会回退到默认项
多级联动时注意禁用状态与占位符的同步
第二级下拉菜单在第一级未选择时应保持禁用（disabled），但很多人只在 HTML 里写死 disabled，忘了 JS 动态启用时要同时移除 disabled 并清除占位符选项（如 “请选择…”），否则用户会看到禁用状态消失但选项仍是灰色占位符。
- 初始化时给第二级
select加disabled和一个空option（<option value="">请选择</option>） - 第一级选中有效值后，先
secondSelect.disabled = false，再清空并注入新选项，最后移除那个占位符option - 如果第一级又切回空值（如 “请选择”），需重新加回占位符，并设
secondSelect.disabled = true
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
