本文介绍如何通过原生 javascript 实现两级联动下拉菜单，即根据第一个下拉框（如国家）的选择，动态显示第二个下拉框（如城市）中对应的可选值，采用 fieldset 分组 + 启用/禁用方案，兼顾语义性、可访问性与表单提交安全性。
本文介绍如何通过原生 javascript 实现两级联动下拉菜单，即根据第一个下拉框（如国家）的选择，动态显示第二个下拉框（如城市）中对应的可选值，采用 fieldset 分组 + 启用/禁用方案，兼顾语义性、可访问性与表单提交安全性。
在构建多级依赖型表单（如“国家 → 城市”）时，推荐避免频繁操作 DOM（如清空并重写 ），而应采用结构化预置 + 状态控制的方式。本方案使用 对每组城市选择器进行逻辑分组，并通过 disabled 属性控制其可见性与表单参与性——这不仅语义清晰、无障碍友好，还能确保被禁用的字段不会随表单提交，无需额外过滤。
✅ 核心实现逻辑
- 每个国家选项（如
"Ug"、"Ke"）对应一个独立的； - 所有 fieldset 初始设为
disabled，CSS 配合fieldset:disabled { display: none; }隐藏； - 监听
#countryselect的change事件，获取选中值（如"Ug"）； - 全局禁用所有 fieldset，再启用与选中值同名的 fieldset（
form["Ug"].disabled = false）。
? 完整示例代码
<style>
fieldset {
border: none;
margin-top: 8px;
}
fieldset:disabled {
display: none;
}
.form-control-selector {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
</style>
<script>
document.forms.form01.countryselect.addEventListener('change', function(e) {
const form = e.target.form;
// 禁用所有 fieldset
[...form.elements]
.filter(el => el.nodeName === 'FIELDSET')
.forEach(el => el.disabled = true);
// 启用匹配的 fieldset（name 与选中值一致）
if (this.value && form[this.value]) {
form[this.value].disabled = false;
}
});
</script>⚠️ 注意事项与最佳实践
-
name 属性必须严格匹配：
的选中值（如"Ug"）需与的name完全一致（区分大小写）； -
避免重复 ID：本方案不依赖
id，故多个name="cityselect"是安全且合法的（浏览器仅提交已启用字段）； -
无障碍增强：为每个
添加，提升屏幕阅读器支持； -
默认状态处理：初始时所有 fieldset 为
disabled，确保用户首次进入页面时无冗余选项； -
扩展性友好：新增国家只需添加
和对应，无需修改 JS 逻辑。
该方案轻量、健壮、符合 HTML 标准，无需 jQuery 或外部库，适用于现代浏览器及主流表单验证流程。
