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

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

本文介绍如何通过原生 JavaScript 监听 `

` 元素的 `change` 事件，动态控制表格中特定 `` 行（如“Masters”和“Bachelors”）的显隐状态，实现选中“本科”时仅显示 BSc 行、选中“研究生”时仅显示 MSc 行的交互效果。

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

以下为完整可运行代码：

  

    
Select Program
    

      
        Undergraduate Program
        Postgraduate Program
      
    
  
  

    
Masters : 
    

      
        MSC
        MSC2
      
    
  
  

    
Bachelors : 
    

      
        BSC
        BSC2
      
    
  

⚠️ 重要注意事项：

• 两个 共享相同 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学习网公众号，一起学习编程~