本文介绍如何通过原生 JavaScript 实现两个 元素的动态联动——当用户选择国家时，自动显示对应城市选项，避免 jQuery 依赖与 DOM 操作错误，提升性能与可维护性。

本文介绍如何通过原生 javascript 实现两个 `` 元素的动态联动——当用户选择国家时，自动显示对应城市选项，避免 jquery 依赖与 dom 操作错误，提升性能与可维护性。

在表单开发中，常见的“级联选择”（如国家→城市）需求，若直接操作 元素增删，易因逻辑错误（如误读文本值、未清空旧选项、索引越界等）导致第二级下拉框空白或行为异常。原问题代码中使用 $("select option:selected").text() 获取选中文本（如 "Ug"），却试图将其转为整数 parseInt("Ug") 进行循环判断，这将返回 NaN，导致后续 for 循环失效，因此第二级 始终为空。

推荐采用语义化、声明式、无 JS 动态 DOM 操作的解决方案：为每个国家预置独立的

包裹其专属城市 ，初始全部禁用（disabled），仅在对应国家被选中时启用该字段集。此方案优势显著：

• ✅ 零 DOM 操作：无需 empty() 或 append()，规避节点渲染风险；
• ✅ 天然表单语义：
  中的控件默认不参与表单提交，无需额外过滤；
• ✅ CSS 精确控制：通过 fieldset:disabled { display: none; } 隐藏非当前选项，界面干净；
• ✅ 原生轻量：摆脱 jQuery 依赖，兼容现代浏览器，加载更快。

以下是完整实现代码（含 HTML、CSS 和 JavaScript）：

Toingg Ops Toolkit

一款AI音频处理工具，主要用于通过向 `toingg/make_campaign` API 发送 POST 请求，提交用户提供的 JSON 数据，创建并启动 Toingg 语音呼叫活动，适用于 Codex 将活动简报……，适合需要提升相关任务效率的用户。

下载

选择国家：

- 选择国家 乌干达 (Ug) 肯尼亚 (Ke) 卢旺达 (Rw) 坦桑尼亚 (Tz) 南非 (SA)

选择城市： - 选择城市 坎帕拉 (A) 金贾 (B)

选择城市： - 选择城市 内罗毕 (C) 蒙巴萨 (D)

选择城市： - 选择城市 基加利 (E) 鲁苏莫 (F)

选择城市： - 选择城市 达累斯萨拉姆 (G) 阿鲁沙 (H)

选择城市： - 选择城市 约翰内斯堡 (I) 开普敦 (J)

fieldset {
  border: none;
  margin-top: 0.5rem;
}
fieldset:disabled {
  display: none;
}
.form-control-selector {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

// 使用原生事件监听，兼容性好且性能优
document.forms.form01.countryselect.addEventListener('change', function(e) {
  const form = e.target.form;
  // 批量禁用所有 fieldset
  [...form.elements]
    .filter(el => el.tagName === 'FIELDSET')
    .forEach(fieldset => fieldset.disabled = true);
  // 启用与所选值同名的 fieldset
  const targetFieldset = form[e.target.value];
  if (targetFieldset) {
    targetFieldset.disabled = false;
  }
});

⚠️ 注意事项：

• fieldset 的 name 属性必须与 countryselect 中 的 value 完全一致（大小写敏感）；
• 所有城市 共享 name="cityselect" 是安全的，因只有启用的
  内控件才会提交；
• 若需支持 IE11，请将 const 改为 var，并用 Array.from(form.elements) 替代扩展运算符；
• 如需添加“无选项”提示，可在每个 中保留首项 - 选择城市。

该方案结构清晰、逻辑健壮、易于扩展——新增国家只需追加一组

和对应 ，无需修改 JS 逻辑，是生产环境推荐的最佳实践。