直接用bootstrap select做省市区联动会卡住，因其仅提供样式而不处理数据与级联逻辑：缺数据源、无防重请求机制、未控制下级禁用状态。
为什么直接用 Bootstrap 的 select 做省市区联动会卡住？
因为 Bootstrap 本身不提供省市区数据，也不处理级联逻辑——它只负责样式。你绑了 change 事件，但没数据源、没加载策略、没禁用状态控制，选完“省份”后“城市”下拉框还是空的，甚至可能重复渲染、丢失焦点。
真正卡点在三处：数据怎么来（本地 JSON 还是 API）、怎么避免重复请求、怎么让下一级 select 在没数据时视觉上“不可操作”。
- 本地数据推荐用轻量 JSON 文件（如
areas.json），结构按{ "province": [{ "name": "北京", "code": "110000", "cities": [...] }]组织 - 首次加载省份后，城市/区县下拉框要主动设
disabled属性，而不是靠 CSS 灰掉——否则用户仍可点击并触发无效事件 - 别在每次
change里重新innerHTML = ''清空，用select.innerHTML = '<option value="">请选择</option>'更安全，避免 DOM 重排抖动
fetch 加载省市区时怎么防重复请求？
用户快速切换省份（比如连点“广东”“浙江”），如果没节流，会发多个并发请求，后到的响应可能覆盖先到的数据，导致城市列表错乱。不是所有浏览器都支持 AbortController，所以得加一层简单锁。
- 声明一个变量
let currentProvinceCode = null，每次请求前比对：若currentProvinceCode === newCode，直接 return - 请求成功后才更新
currentProvinceCode = code，失败不更新，下次同 code 还能重试 - 如果用 API，后端最好支持按
parent_code查询，例如/api/areas?parent=110000，别传中文名——编码更稳定
Bootstrap 5 下怎么让联动后的 select 保持样式一致？
原生 select 动态插入 option 后，Bootstrap 5 不会自动刷新自定义下拉样式（尤其是用了 data-bs-toggle="select" 这类插件时）。你看到的是原生 select，或者下拉箭头消失。
- 如果是纯 Bootstrap 5（无第三方插件），不用额外操作——它的
form-select类只是 CSS，DOM 更新后样式自然生效 - 如果用了
bootstrap-select这类插件，必须手动调用$('select').selectpicker('refresh')或element.selectpicker('refresh') - 别用
$(...).html(...)替换整个select，会丢失绑定的事件和插件实例；只操作其innerHTML或用appendChild
移动端点击下拉框闪退或选项不显示？
部分安卓 WebView 或 iOS Safari 在动态修改 select 后，原生下拉面板不触发，尤其在 display: none 切换后。这不是代码写错了，是渲染机制问题。
- 确保三个
select都始终在 DOM 中（不要remove()或innerHTML = ''清空再重建），只清空option子节点 - 给城市/区县
select加默认占位项：<option value="" disabled selected>请选择城市</option>，避免空值导致渲染异常 - 如果用 Vue/React，别直接操作 DOM；Vue 用
v-for+:key，React 用key强制重置，否则虚拟 DOM Diff 可能跳过更新
最麻烦的其实是数据一致性——比如“东莞市”属于地级市，但没“市辖区”，区县字段要 fallback 到镇街数据；这种边界 case 很少写在示例里，但上线后准出问题。
