用JavaScript实现两级联动：HTML仅提供两个select结构，JS用对象映射国家与地区数据，监听countrySelect的change事件动态填充regionSelect；注意绑定时机、禁用选项处理及移动端体验优化。
怎么用 select 实现两级联动（国家→地区）
靠纯 HTML 无法实现联动，必须配合 JavaScript。HTML 只负责结构：两个 select 元素，一个放国家，一个放地区，后者初始为空或含占位符。
关键点在于「数据驱动」而非「DOM 硬编码」——别把所有国家+地区选项全写死在 HTML 里，那样维护崩溃、体积膨胀、还容易漏掉新国家（比如南苏丹）。推荐用 JS 对象存映射关系：
const countryRegionMap = {
"CN": ["北京市", "上海市", "广东省", "四川省"],
"US": ["California", "Texas", "New York"],
"JP": ["Tokyo", "Osaka", "Kyoto"]
};
用户选中 countrySelect 后，清空并重填 regionSelect 的 option。注意：要保留 value 和显示文本一致，避免提交时取不到值。
change 事件监听失效的常见原因
监听没反应？八成是绑定时机错了。如果 JS 代码写在 <head> 里，而 select 还没被解析，document.getElementById() 就会返回 null。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 把 script 放在 body 底部（紧挨
</body>） - 用
DOMContentLoaded包一层（更稳妥）
另外，别给 select 设 disabled 属性后还试图监听它的 change——它根本不会触发。还有，用 jQuery 的话，确保用 .on("change", ...) 而不是 .change(...)，后者对动态插入的节点无效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
地区列表为空时该显示什么
用户刚打开页面，或者选了“请选择国家”，对应地区列表应该清空并显示提示项，但这个提示项不能被表单提交——否则后端收到空字符串或“请选择地区”这种垃圾值。
正确做法是加一个带空 value 的禁用选项：
<option value="" disabled selected>请选择地区</option>
这样既友好，又保证 regionSelect.value 在未选择时为 ""，后端可直接判空。千万别用 value="0" 或 value="-1" 来表示未选，语义混乱，且容易和真实地区 ID 冲突。
移动端下拉体验差，怎么缓解
原生 select 在 iOS 上唤起的是滚轮式选择器，安卓各厂商也不统一，样式不可控，且二级联动时频繁呼出/收起键盘，体验割裂。
如果项目允许轻微增强，建议：
- 用
role="combobox"+aria-expanded模拟下拉，配合div渲染选项列表（真正可控） - 至少给
select加autofocus或tabindex="0"，确保键盘用户能聚焦操作 - 别在
change回调里做耗时操作（比如发请求查地区），否则 iOS 会卡住下拉框收起动画
真要查远端地区数据，优先用懒加载：只在用户选完国家后，再 fetch 对应地区列表，而不是一进页面就拉全量 JSON。
联动逻辑本身不难，难的是边界情况：国家列表异步加载完成前用户乱点、地区数据接口失败、用户用键盘导航跳过第一级直接聚焦第二级……这些地方一漏，表单就卡死或提交脏数据。
