本文介绍如何通过原生 JavaScript 实现两个 元素的动态联动——当用户选择不同国家时，第二个下拉框自动显示对应的城市选项，无需 jQuery，代码轻量、语义清晰且兼容性好。

本文介绍如何通过原生 javascript 实现两个 `` 元素的动态联动——当用户选择不同国家时，第二个下拉框自动显示对应的城市选项，无需 jquery，代码轻量、语义清晰且兼容性好。

在表单开发中，「级联选择」（如国家 → 城市）是常见需求。但直接操作 的增删易出错（如原代码中误用 text() 获取值、循环逻辑错位），且维护成本高。更健壮的方案是结构化预置 + 状态控制：为每个国家预先定义专属的城市选择器，并通过

的 disabled 属性控制显隐。

该方法优势显著：

• ✅ 语义正确：
  天然不参与表单提交，无需手动过滤；
• ✅ 性能优异：无 DOM 动态创建/销毁，避免重排重绘；
• ✅ 可访问性强：屏幕阅读器可识别禁用状态，符合 WCAG 标准；
• ✅ 代码简洁：纯原生 JS，零依赖，易于调试与扩展。

实现步骤

1. HTML 结构：将每个国家对应的城市 封装进独立
   ，name 属性设为国家代码（如 "Ug"），并统一添加 disabled；
2. CSS 样式：隐藏禁用的 fieldset（fieldset:disabled { display: none; }），保持界面整洁；
3. JS 逻辑：监听 countryselect 的 change 事件，遍历所有 fieldset 并设为 disabled，再根据选中值启用对应 fieldset。

- Choose Country Ug Ke Rw Tz SA

- Choose City A B

- Choose City C D

<script> document.forms.form01.countryselect.addEventListener('change', function(e) { const form = e.target.form; // &#25209;&#37327;&#31105;&#29992;&#25152;&#26377; fieldset [...form.elements] .filter(el => el.nodeName === 'FIELDSET') .forEach(el => el.disabled = true); // &#21551;&#29992;&#21305;&#37197;&#30340; fieldset&#65288;name &#19982;&#36873;&#20013; value &#19968;&#33268;&#65289; if (form[e.target.value]) { form[e.target.value].disabled = false; } }); </script>

注意事项

• name 属性必须唯一且精确匹配：
  与 的值需完全一致（区分大小写）；
• 表单提交时仅提交启用字段：被禁用的
  内所有控件均不会出现在 FormData 或 form.submit() 请求中；
• 扩展性提示：新增国家时，只需追加一个
  及其内部 ，无需修改 JS 逻辑；
• 无障碍增强：可为
  添加 aria-labelledby 关联标题，进一步提升可访问性。

此方案规避了动态 DOM 操作的潜在风险，兼顾性能、可维护性与标准合规性，是生产环境推荐的级联选择实现方式。