option标签本身不支持联动交互，必须通过JavaScript监听select的change事件，清空并动态重建目标select的option列表来实现省市联动。
option 标签本身不支持联动交互，它只是静态选项容器；联动必须靠 JavaScript 驱动 select 的 change 事件 + 动态操作 DOM 或数据
为什么直接写多个 option 无法实现省市联动
浏览器渲染时，option 元素只是 select 的子节点，没有内置状态感知或依赖关系。即使你把“广东省”和“深圳市”写在同一个 HTML 文件里，它们之间也不存在逻辑绑定——option 不会因为另一个 select 选了“广东”，就自动显示或隐藏“深圳”。
-
option没有data-parent、data-level这类原生联动属性 - 浏览器不会解析
option的文本内容去匹配其他下拉框的 value - 所有“联动效果”都是 JS 在监听
change后，手动清空、重建目标select的option列表
联动必须用 JavaScript 监听 change 并操作 option 节点
核心动作只有三步：监听变化 → 清空旧选项 → 插入新 option。不能靠 CSS 或 HTML 属性自动完成。
- 用
addEventListener('change', handler)绑定上级select - 每次触发时，先调用
targetSelect.innerHTML = ''或targetSelect.replaceChildren()清空旧option - 再用
new Option(text, value)构造实例，或拼接字符串后用insertAdjacentHTML注入 - 避免直接 innerHTML += ''，会导致重复添加或状态错乱
Option() 构造函数比字符串拼接更安全
动态创建 option 时，用 new Option(text, value) 能准确设置 text 和 value，且兼容 IE9+。手写字符串容易漏引号、转义失败，或把 value 当成 text 显示。
立即学习“前端免费学习笔记（深入）”；
const citySelect = document.getElementById('city');
const cities = { 'guangdong': ['广州', '深圳', '珠海'], 'sichuan': ['成都', '绵阳'] };
<p>document.getElementById('province').addEventListener('change', e => {
const prov = e.target.value;
citySelect.replaceChildren(); // 清空所有 option
if (cities[prov]) {
cities[prov].forEach(name => {
citySelect.appendChild(new Option(name, name)); // text 和 value 都设为 name
});
}
});-
new Option(text, value)第二个参数是 value，不是 innerText；省略时 value 默认等于 text - 不要用
citySelect.options.add(new Option(...))，IE 旧版有兼容问题 - 如果需要默认选中某项，设
citySelect.selectedIndex = 0，而不是给option加selected属性（动态插入时不生效）
容易忽略的边界情况：空值、disabled、异步加载
真实项目里，联动常卡在这些细节上：
- 用户快速切换省份时，如果城市数据是 fetch 异步获取的，要加 loading 状态并 abort 之前的请求，否则
option可能插错顺序 - 当上级
select选了空值（如<option value="">-- 请选择 --</option>），下游select应该清空并禁用，而不是留着旧选项 -
disabled的option在 iOS Safari 中仍可被 focus，需额外加pointer-events: none或禁用整个select - 用
dataset存关联 ID（如<option data-province-id="44">广东</option>）比靠 value 文本匹配更可靠，尤其含空格或特殊字符时
联动的本质是数据映射 + DOM 同步，option 只是最终呈现的“像素”，别指望它自己思考。
