多级关联选择框的最小可行结构是三个带id的元素，其中后两级初始disabled且为空，所有必须用data-parent等属性显式标记层级归属，禁用项不参与表单提交。
什么是多级关联选择框的最小可行结构
它不是靠 JavaScript 动态渲染出来的“组件”，而是用原生 <select></select> 和 <option></option> 搭出能体现层级关系的静态骨架。关键在于：上级选项变化时，下级 <select></select> 的 disabled 状态、value 初始值、以及 <option></option> 的显隐逻辑必须可被 JS 控制——但 HTML 本身只负责结构和语义。
最简结构包含三个部分：<select id="level1"></select>、<select id="level2" disabled></select>、<select id="level3" disabled></select>。所有 <option></option> 都要带 data-parent 或 data-level 属性来标记归属关系，否则 JS 无法判断该显示哪些项。
如何给 option 标记层级归属关系
不能只靠文本内容或顺序来推断父子关系，浏览器不认这个。必须用属性显式声明。常见做法是用 data-parent 指向上级 value，或者用 data-level + data-id 组合标识唯一路径。
-
<option value="beijing" data-parent="china">北京</option>—— 适合两级，简单直接 -
<option value="chaoyang" data-parent="beijing" data-level="3">朝阳区</option>—— 三级时加data-level方便过滤 - 避免用中文或空格作
value，比如value="北京市"容易在 JS 中引发编码或比较问题，统一用英文或短横线命名（value="beijing"）
为什么不能直接写死全部 option 并靠 CSS 隐藏
用 display: none 或 hidden 属性隐藏下级选项，在多数屏幕阅读器和键盘导航中仍会被读出或聚焦，不符合可访问性要求。而且 Safari 对 <option hidden></option> 支持不稳定，部分版本会忽略。
正确做法是：初始状态下，只保留第一级 <option></option>；第二、三级 <select></select> 内部留空，等 JS 根据上级选中值动态插入对应 <option></option>。这样既语义清晰，又规避了隐藏元素带来的兼容性和无障碍问题。
示例结构片段：
<select id="province"><option value="">请选择省份</option> <option value="beijing">北京</option> <option value="shanghai">上海</option></select><select id="city" disabled></select><select id="district" disabled></select>
如何让 disabled select 在表单提交时不传值
HTML 规范规定：disabled 的 <select></select> 不会提交任何值，哪怕它有 name 属性。这点常被误以为需要 JS 清空 value 或移除 name —— 其实完全没必要。
但要注意一个坑：如果用 readonly 替代 disabled（因为想保持样式一致），那它就会参与提交，且多数浏览器不支持 readonly 在 <select></select> 上生效，行为不可控。
- 始终用
disabled，不要试图用 CSS 模拟禁用状态 - 如果需在提交前校验是否已选完三级，检查的是
document.getElementById('district').value是否为空，而不是看它是否 disabled - 后端接收时，只处理非空的
name字段，忽略未启用的 select 即可
真正麻烦的不是结构搭建，而是当某一级数据量大（比如全国 3000+ 区县）、或存在跨级依赖（如“直辖市”下没有“地级市”这一层）时，如何组织 data 属性和 JS 映射逻辑。这部分没法靠 HTML 解决，得靠预处理的数据结构和清晰的 key 命名约定撑住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
