本文介绍如何通过原生 JavaScript 实现两个 元素的动态联动——当用户选择不同国家时，第二个下拉框自动显示对应的城市选项，无需 jQuery，代码轻量、语义清晰且兼容性好。
本文介绍如何通过原生 javascript 实现两个 `
在表单开发中，「级联选择」（如国家 → 城市）是常见需求。但直接操作 <option></option> 的增删易出错（如原代码中误用 text() 获取值、循环逻辑错位），且维护成本高。更健壮的方案是结构化预置 + 状态控制：为每个国家预先定义专属的城市选择器，并通过 <fieldset></fieldset> 的 disabled 属性控制显隐。
该方法优势显著：
- ✅ 语义正确：
<fieldset disabled></fieldset>天然不参与表单提交，无需手动过滤； - ✅ 性能优异：无 DOM 动态创建/销毁，避免重排重绘；
- ✅ 可访问性强：屏幕阅读器可识别禁用状态，符合 WCAG 标准；
- ✅ 代码简洁：纯原生 JS，零依赖，易于调试与扩展。
实现步骤
-
HTML 结构：将每个国家对应的城市
<select></select>封装进独立<fieldset></fieldset>，name属性设为国家代码（如"Ug"），并统一添加disabled； -
CSS 样式：隐藏禁用的 fieldset（
fieldset:disabled { display: none; }），保持界面整洁； -
JS 逻辑：监听
countryselect的change事件，遍历所有 fieldset 并设为disabled，再根据选中值启用对应 fieldset。
<form name="form01">
<select class="form-control-selector" name="countryselect" required>
<option value="" selected>- Choose Country</option>
<option value="Ug">Ug</option>
<option value="Ke">Ke</option>
<option value="Rw">Rw</option>
<option value="Tz">Tz</option>
<option value="SA">SA</option>
</select>
<!-- Ug 对应的城市选择器 -->
<fieldset name="Ug" disabled>
<select class="form-control-selector" name="cityselect" required>
<option value="" selected>- Choose City</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</fieldset>
<!-- Ke 对应的城市选择器 -->
<fieldset name="Ke" disabled>
<select class="form-control-selector" name="cityselect" required>
<option value="" selected>- Choose City</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</fieldset>
<!-- 其他国家同理... -->
</form>
<style>
fieldset { border: none; }
fieldset:disabled { display: none; }
</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 与选中 value 一致）
if (form[e.target.value]) {
form[e.target.value].disabled = false;
}
});
</script>注意事项
-
name 属性必须唯一且精确匹配：
<fieldset name="Ug"></fieldset>与<option value="Ug"></option>的值需完全一致（区分大小写）； -
表单提交时仅提交启用字段：被禁用的
<fieldset></fieldset>内所有控件均不会出现在FormData或form.submit()请求中； -
扩展性提示：新增国家时，只需追加一个
<fieldset name="NewCode"></fieldset>及其内部<select></select>，无需修改 JS 逻辑； -
无障碍增强：可为
<fieldset></fieldset>添加aria-labelledby关联标题，进一步提升可访问性。
此方案规避了动态 DOM 操作的潜在风险，兼顾性能、可维护性与标准合规性，是生产环境推荐的级联选择实现方式。
