三级联动必须用JavaScript实现，需正确绑定change事件、清空并重建选项、串行请求防并发、缓存响应、守卫两级有效值，且处理页面刷新状态丢失。
原生 <select> 标签不支持嵌套或自动联动，三级联动必须靠 JavaScript 控制数据流和 DOM 更新，不是加个 onchange 就能跑通的。
监听 change 事件要防键盘操作漏触发
直接在 HTML 里写 onchange="handler()" 会漏掉键盘选中（比如用方向键+回车）、屏幕阅读器切换等场景。DOM 加载后用 addEventListener('change', ...) 才可靠。
- 确保绑定时机：放在
DOMContentLoaded或window.onload之后，否则document.getElementById('province')可能返回null - 避免重复绑定：SPA 页面复用组件时，先
removeEventListener再绑，或用布尔标志位控制 - 别用
onclick替代change：点击未真正改变值时也会触发，造成误更新
动态更新下拉选项必须清空再重建
不清空就直接 appendChild，会导致城市列表越点越多；用 innerHTML += 拼接字符串还可能引入 XSS 风险（尤其数据来自接口）。
- 清空推荐写法：
citySelect.innerHTML = '<option value="">请选择城市</option>'，语义清晰且重置默认项 - 新增选项必须用
document.createElement('option')，再设option.value和option.textContent，避免属性/文本混用导致显示异常 - 保留默认提示项（如
<option value="">请选择</option>），否则用户可能提交空值
接口请求必须串行、带 loading、防并发
第二级依赖第一级 ID，第三级依赖第二级 ID，不能用 Promise.all 并发拉，也不能同步顺序调用阻塞 UI。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正确流程：一级加载完 → 用户选中 → 触发二级请求 → 返回后再启用三级下拉
- 每次请求前禁用下游
<select>，并插入 “加载中…” 选项，防止用户连点触发多个请求 - 缓存已请求过的响应（如
cache.set(provinceId, cities)），同一省第二次点开直接读缓存 - 第三级请求 URL 必须带两个上游参数，例如
/api/districts?province_id=110000&city_id=110100，且只在citySelect.value确实存在时才发起
表单提交后状态丢失不是联动 bug，是没处理生命周期
页面刷新后所有 JS 状态归零，这不是联动逻辑错了，而是没做持久化或拦截默认行为。
- 如果只是前端 demo，加
event.preventDefault()阻止 form 默认提交即可 - 若必须整页提交，把当前选中的三个值存进
localStorage或 URL 查询参数，重载后从那里恢复 - 服务端渲染页面（如 PHP 模板）要注意：后端生成的
selected属性和前端 JS 状态冲突时，以 JS 状态为准，首次加载后立刻用 JS 覆盖 DOM
最易被忽略的是第三级请求的守卫条件 —— 它必须同时检查上游两级的 value 是否有效，缺一不可。少判一个，就可能出现空 ID 请求或下拉框卡死。
