下拉控制表格行显示隐藏技巧

本文详解了如何用原生 JavaScript 实现下拉选择动态控制表格行显隐的实用技巧——通过监听 `<select>` 的 `change` 事件，精准切换 `` 元素的 `display` 样式（使用 `"table-row"` 和 `"none"` 而非通用值，避免破坏表格结构），让“本科”选项仅显示 BSc 行、“研究生”选项仅显示 MSc 行；同时强调了 id 唯一性、兼容性处理及可扩展性优化建议，全程零依赖、语义清晰、开箱即用，是表单交互开发中轻量高效又稳健的解决方案。

本文介绍如何通过原生 JavaScript 监听 `<select>` 元素的 `change` 事件，动态控制表格中特定 `` 行（如“Masters”和“Bachelors”）的显隐状态，实现选中“本科”时仅显示 BSc 行、选中“研究生”时仅显示 MSc 行的交互效果。

在表单开发中，常需根据用户选择动态切换显示内容，避免界面冗余。本例使用纯 JavaScript（无需框架），通过 display: table-row 和 display: none 精准控制 的可见性——注意： 是表格行元素，其默认 display 值为 table-row，因此应使用 "table-row" 而非 "block" 或 "inline"，否则可能破坏表格布局。

以下为完整可运行代码：

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

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

    // 初始化状态：本科默认选中 → 显示 BSc，隐藏 MSc
    mscRow.style.display = "none";
    bscRow.style.display = "table-row";

    progSelect.addEventListener("change", function () {
      if (progSelect.value === "0") {
        // Undergraduate selected → show BSc, hide MSc
        mscRow.style.display = "none";
        bscRow.style.display = "table-row";
      } else if (progSelect.value === "1") {
        // Postgraduate selected → show MSc, hide BSc
        mscRow.style.display = "table-row";
        bscRow.style.display = "none";
      }
    });
  });
</script>

⚠️ 重要注意事项：

• 两个 <select name="major"> 共享相同 name 和 id（major），这将导致 HTML 无效（id 必须唯一）且 JS 获取元素时行为不可控。示例中已修正为 id="major-msc" 和 id="major-bsc"，实际使用中请确保每个 id 全局唯一；
• 若需支持旧版 IE，可改用 row.style.visibility = "collapse"，但 visibility: collapse 对 的兼容性有限，推荐坚持使用 display 方案；
• 如后续需扩展更多选项（如博士、双学位），建议将逻辑封装为映射对象（如 { "0": ["bsc"], "1": ["msc"] }），提升可维护性。

该方案轻量、语义清晰、无外部依赖，适用于各类静态表单场景。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

</select>

</select>