如何根据下拉选项动态显示或隐藏表格行（tr）

本文介绍如何使用原生 javascript 实现根据 `` 的选中值，动态控制表格中特定 `

` 元素的显示与隐藏，适用于本科/硕士项目表单的条件渲染场景。

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

核心思路

通过监听

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

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

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

完整实现代码

   
     
select Program
     
                Undergraduate Program         Postgraduate Program            
   
   
     
Masters : 
     
                MSC         MSC2            
   
   
     
Bachelors : 
     
                BSC         BSC2            
   
 
  

关键优化说明

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

扩展建议

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

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