仅用<select>标签无法实现省市区三级联动，因其不能动态响应选择、自动更新下级选项、保证数据一致性或提交完整路径；必须配合JS控制显隐、填充选项、校验状态并处理兼容性问题。
直接用 <select> 做省市区三级联动，不加 JS 就只能静态写死，实际根本没法用；真要可选、可回填、可提交，必须配合 JS 处理数据和状态。
为什么不能只靠 <select> 标签硬编码地址
纯 HTML 的 <select> 无法动态响应用户选择：选了“广东省”，“深圳市”下拉框不会自动更新选项；提交时也拿不到完整路径（比如“广东省 > 深圳市 > 南山区”）。常见错误是把所有省市区一次性全塞进 HTML，导致页面体积大、加载慢、维护困难。
- 静态写死的
<option>无法支持“选省→刷新市→选市→刷新区”流程 - 用户修改上级选项后，下级仍保留旧值，造成数据不一致（如省选了江苏，市还显示广州）
- 表单提交时，
<select>只传value，没法定制组合字段（如同时需要province_code和city_name）
最简可行的三级联动结构（含必要 JS）
用三个 <select> 元素，通过 JS 控制显隐和选项内容。数据源建议用轻量 JSON（例如 region-data.js），避免内联大量 <option>。
<select id="province"><option value="">请选择省份</option></select> <select id="city" disabled><option value="">请选择城市</option></select> <select id="district" disabled><option value="">请选择区县</option></select>
关键逻辑：监听 province 的 change 事件 → 清空并填充 city → 启用它；同理处理 city → district。禁用未就绪的下拉框，防止误操作。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
提交前必须校验的三个字段状态
用户可能跳过某一级（比如只选了省，没选市），但后端通常要求三级都填。JS 提交前检查不能只看 value 是否为空，还要确认 disabled 状态是否已解除。
- 检查
document.getElementById('province').value非空 - 检查
document.getElementById('city').disabled === false且其value非空 - 检查
document.getElementById('district').disabled === false且其value非空 - 若任一条件不满足，阻止
submit并提示“请完整选择省、市、区”
兼容性与性能容易被忽略的点
移动端 Safari 对连续快速切换 <select> 有时会触发两次 change；Chrome 在表单重置（form.reset()）后，disabled 状态不会自动恢复，需手动重置。
- 给
change事件加简单防抖（setTimeout+ 清除），避免重复请求或渲染 - 初始化时清空所有下级
<select>的innerHTML，再 append 新<option>，别用innerHTML +=拼接 - 如果用 fetch 加载地区数据，记得加 loading 状态（比如禁用按钮、加
disabled属性），否则用户可能连点多次
真正麻烦的不是写三个 <select>，而是确保每次选择都同步更新下级、提交时能拿到准确的三级 code/name 组合，并在用户反复切换时不出错——这些细节不写进 JS，光靠 HTML 标签永远跑不起来。
