直接用现成组件最省事，china-areas提供维护良好的纯JS省市区数据（含代码、拼音、层级），配合原生可避开样式、焦点管理及边界情况（如直辖市、港澳台、撤并区划）处理难题。
直接用现成的省市区三级联动组件最省事，自己手写弹窗+数据加载容易漏掉边界情况，比如港澳台、直辖市下辖区直属于省级、或者某些区已撤并但数据没更新。
用 china-areas + dialog 快速搭出可访问的弹窗
别从零写 DOM 和事件，china-areas 是维护良好的纯 JS 省市区数据（含代码、拼音、层级），配合原生 <dialog></dialog> 元素能避开大量样式和焦点管理问题。
-
npm install china-areas后在 JS 里解构出provinceList、cityListByCode、areaListByCode - 弹窗结构用
<dialog id="area-dialog"><select id="province"></select></dialog>，不用div模拟，否则要手动处理Escape关闭、焦点捕获、aria-modal - 首次打开时才调用
dialog.showModal()，避免页面加载就触发渲染阻塞
change 事件里怎么避免重复请求市级列表
选中省份后立即查市级列表是常见做法，但用户快速切换省份时，上一个 fetch 可能还没返回，导致城市列表错乱。不能只靠 disabled 省级下拉框来防抖。
- 用
AbortController在每次change前调用abort()中断前一次请求 - 市级
<select></select>的value设为空字符串，而不是保留上次选中的值，防止“北京”切到“广东”后城市还显示“朝阳区” - 如果后端接口支持批量查（如传入多个省 code），优先用单次请求拉回所有市，比逐个
fetch更稳
为什么不能把全部省市区数据一次性塞进 HTML 的 data- 属性里
有人图省事把几万字节的 JSON 写进 <div data-areas="...">，看似免了异步加载，实则埋了三个坑：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>HTML 体积暴涨，首屏渲染变慢，尤其弱网下 <code>DOMContentLoaded 延迟明显
data- 属性长度有隐式限制，iOS Safari 某些版本会截断超长字符串JSON.parse(decodeURIComponent(...)) 多层解包，易出错真正难的不是渲染三级下拉，而是处理「新疆生产建设兵团」这种特殊行政区划归属、用户点「北京市」后城市列表为空（因为直辖）、以及弹窗关闭后如何把选中的 { province: '440000', city: '440300', area: '440305' } 安全回填到表单字段——这些细节不写测试很难覆盖全。
