级联结构依赖 data-level 和 data-parent 显式标记，而非嵌套深度；JS 通过查询 data-level 并读取 dataset.parent 确定依赖关系；change 时需清空后续 select 并防并发覆盖；地区数据宜用扁平数组 filter 而非嵌套 JSON；清空操作推荐 replaceChildren()。
级联结构在 HTML 中不是靠嵌套深度体现的，而是靠显式标记和 JS 主动控制。不加 data-level 和 data-parent，再深的嵌套也毫无级联意义。
必须用 data-level 和 data-parent 标记依赖关系
浏览器原生 <select> 不知道谁管谁。靠 DOM 顺序（比如“第二个 <select> 就是市”）或 class 名硬编码，页面一重构就失效。
-
data-level="1"表示第一级（如省），data-level="2"表示第二级（如市），依此类推 -
data-parent="province"明确告诉 JS：“我依赖 id 为province的那个 select” - JS 可以统一查
document.querySelectorAll('[data-level="2"]')，再用el.dataset.parent找上游，增删层级不用改逻辑
change 事件里先清空后续 select，再异步填充
用户从“广东”切到“浙江”，若不清空城市和区，就会残留“深圳”选项；更危险的是两次快速切换触发并发请求，后返回的数据可能覆盖前一次，导致“浙江 → 深圳”这种错乱。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
province的change后，立刻调用clearNextSelects('province')：清空innerHTML、重置value、设disabled = true - 请求城市数据成功后，只填
city，不碰district；填完可手动触发city.dispatchEvent(new Event('change'))，但要加防抖或标记避免死循环 - iOS Safari 中
disabled不可靠，建议额外加style="pointer-events: none"或移除事件监听器
地区数据用扁平数组 + filter()，别用嵌套 JSON
嵌套结构如 { "广东": { "深圳": ["南山"] } } 看着直观，实际极易出错：键名大小写、空格、历史别名（“内蒙” vs “内蒙古”）都会让 obj[provinceName] 返回 undefined；做搜索、分页时还要反复 Object.keys()，性能差且难调试。
立即学习“前端免费学习笔记（深入）”；
- 推荐用扁平数组：
[{ province: "广东", city: "深圳", district: "南山" }, ...] - 查城市时：
data.filter(item => item.province === selectedProvince) - 查区时：
data.filter(item => item.province === p && item.city === c) - 支持去重、排序、模糊匹配，也方便和服务端接口对齐
最易被忽略的点：清空操作不能只靠 innerHTML = ''——它会丢失焦点、重置已选值、触发多余渲染；现代浏览器用 replaceChildren() 最稳妥，兼容旧版得用循环 remove(0) 或直接赋默认 innerHTML 字符串。
