本文介绍如何使用原生 javascript 实现根据 `` 的选中值，动态控制表格中特定 `` 元素的显示与隐藏，适用于本科/硕士项目表单的条件渲染场景。

在构建动态表单时，常需根据用户选择切换可见内容——例如：当用户选择“本科项目”时仅显示学士专业下拉框，而隐藏硕士相关字段；反之亦然。这种交互无需依赖框架，纯 HTML + JavaScript 即可优雅实现。

核心思路

通过监听

元素的 change 事件，读取当前选中 value（如 "0" 表示本科，"1" 表示硕博），并据此设置目标 的 display 样式：

• display: "table-row" → 显示该行（默认表格行样式）
• display: "none" → 完全隐藏

⚠️ 注意：避免使用 visibility: hidden 或 opacity: 0，因其仍占用布局空间；display: none 才能真正移除渲染流中的元素。

完整实现代码

<table>
  <tr>
    <td>Select Program</td>
    <td>
      <select name="prog" id="prog">
        <option value="0">Undergraduate Program</option>
        <option value="1">Postgraduate Program</option>
      </select>
    </td>
  </tr>
  <tr id="msc">
    <td>Masters : </td>
    <td>
      <select name="major" id="major-msc">
        <option>MSC</option>
        <option>MSC2</option>
      </select>
    </td>
  </tr>
  <tr id="bsc">
    <td>Bachelors : </td>
    <td>
      <select name="major" id="major-bsc">
        <option>BSC</option>
        <option>BSC2</option>
      </select>
    </td>
  </tr>
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const progSelect = document.getElementById("prog");
  const mscRow = document.getElementById("msc");
  const bscRow = document.getElementById("bsc");

  // 初始化状态：本科默认可见，硕士默认隐藏
  mscRow.style.display = "none";
  bscRow.style.display = "table-row";

  progSelect.addEventListener("change", function () {
    if (progSelect.value === "0") {
      // 本科：显示 bsc，隐藏 msc
      bscRow.style.display = "table-row";
      mscRow.style.display = "none";
    } else if (progSelect.value === "1") {
      // 硕博：显示 msc，隐藏 bsc
      mscRow.style.display = "table-row";
      bscRow.style.display = "none";
    }
  });
});
</script>

关键优化说明

• ID 唯一性修复：原始代码中两个 共享同一 id="major"，违反 HTML 规范（ID 必须唯一）。已改为 id="major-msc" 和 id="major-bsc"，便于后续扩展表单逻辑。
• 初始化逻辑：页面加载时即设置默认显隐状态，确保首屏体验一致。
• 语义化增强：使用 if/else if 替代三元运算符，提升可读性与可维护性，尤其利于后续添加更多选项（如博士、双学位等）。

扩展建议

• 若需支持多级联动（如选“硕士”后再选“研究方向”），可嵌套事件监听或采用数据驱动方式（如 data-show-for="1" 属性配合类名控制）。
• 结合 CSS 类（如 .hidden { display: none; }）管理样式，更利于主题定制与动画过渡。

掌握此技巧后，你可轻松实现各类条件表单、步骤向导或响应式配置界面——简洁、可靠、零依赖。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载