本文介绍如何实现两个关联下拉菜单，使第一个下拉框（国家）的选择实时控制第二个下拉框（城市）的可选项，采用语义化、可维护的 fieldset 分组 + 原生 javascript 方案，避免 jquery 依赖与 dom 频繁操作。
本文介绍如何实现两个关联下拉菜单，使第一个下拉框（国家）的选择实时控制第二个下拉框（城市）的可选项，采用语义化、可维护的 fieldset 分组 + 原生 javascript 方案，避免 jquery 依赖与 dom 频繁操作。
在表单开发中，「级联选择」（Cascading Select）是常见需求——例如先选国家，再根据所选国家动态加载对应的城市或地区列表。传统做法常通过 empty() + append() 动态重写 ，但易出错、难维护，且忽略表单语义与无障碍支持。本文推荐一种更健壮、语义清晰的替代方案：利用 分组 + disabled 属性控制可见性与提交行为。
✅ 核心思路
- 每个国家对应一个独立的
，内含专属的； - 所有 fieldset 初始设为
disabled，配合 CSS 隐藏（display: none）； - 当用户切换国家时，仅启用匹配
name的 fieldset，其余保持禁用； - 关键优势：禁用的 fieldset 及其子元素不会参与表单提交，无需手动清空或校验值，天然符合 HTML 表单规范。
? 完整实现代码
<script> document.forms.form01.countryselect.addEventListener('change', function (e) { const form = e.target.form; // 禁用所有 fieldset [...form.elements] .filter(el => el.nodeName === 'FIELDSET') .forEach(fs => fs.disabled = true); // 启用匹配当前国家值的 fieldset if (this.value && form[this.value]) { form[this.value].disabled = false; } }); </script>⚠️ 注意事项与最佳实践
-
name必须严格一致：与的值必须完全相同（区分大小写），否则form[this.value]查找失败； -
默认状态处理：初始时所有 fieldset 为
disabled，确保未选择国家前无城市可选，符合业务逻辑； -
无障碍友好：
显式绑定、fieldset语义化分组，利于屏幕阅读器识别； -
表单提交安全：禁用的 fieldset 内部控件自动被排除在
FormData和form.submit()之外，无需额外校验； -
扩展性强：新增国家只需添加
和对应，逻辑零侵入； -
兼容性：纯原生 JS，支持所有现代浏览器（IE11+ 需微调
for...of或使用Array.from()）。
该方案摒弃了易错的 DOM 操作，转而利用 HTML 原生能力实现高效、可维护、语义正确的级联交互，是生产环境中的推荐实践。
