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

碧海醫心

发布时间：2026-02-09 12:23:20

943人浏览过

来源于php中文网

原创

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

本文介绍如何使用原生 javascript 实现根据 ` 元素的 change 事件，读取当前选中 value（如 "0" 表示本科，"1" 表示硕博），并据此设置目标的 display 样式：

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

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

完整实现代码


  
    Select Program
    
      
    
  
  
    Masters : 
    
      
    
  
  
    Bachelors :

关键优化说明

ID 唯一性修复：原始代码中两个
初始化逻辑：页面加载时即设置默认显隐状态，确保首屏体验一致。
语义化增强：使用 if/else if 替代三元运算符，提升可读性与可维护性，尤其利于后续添加更多选项（如博士、双学位等）。

扩展建议

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

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

ChatMind

ChatMind是一款AI生成思维导图的效率工具，可以通过AI对话生成和编辑思维导图。

下载

如何在动态切换定位属性时保持 CSS 过渡动画的连续性

如何正确清除 HTML 表格中所有单元格的背景色（包括被单独着色的列）

如何将 CSS 伪元素轮播图从 3 卡扩展为 5 卡

如何在 SVG 中实现纯 CSS 与 JavaScript 协同的悬停动效

如何使用 CSS 变量动态替换的文本内容

相关标签:

css javascript java html 多级联动运算符三元运算符 if for select 事件 display table tr

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：浏览器与 Node.js 中 new URL() 行为差异及标准化兼容方案下一篇：HTML 解析与 JavaScript 执行的优先级关系解析

作者最新文章

如何优雅地在二维复数数组中找到模最大的复数值（而非仅返回其模长）

2026-02-07 16:36

如何使用 jQuery 基于未选中复选框动态显示/隐藏表格行

2026-02-07 16:36

如何在 Java 应用中为 GridDB 自定义连接端口

2026-02-07 16:49

如何在复杂表达式（如列表推导式）中嵌入 print 语句进行调试

2026-02-07 16:54

Go语言中的生产者-消费者模型：理解无缓冲通道的同步机制

2026-02-07 17:18

如何开通校园一信通卡并绑定

2026-02-07 17:34

高效流式构建与持久化 Polars DataFrame 的最佳实践

2026-02-07 17:58

瑞幸联名三丽鸥什么时候上线

2026-02-07 17:58

Spring 中 Application Scope Bean 的作用域详解

2026-02-07 18:05

如何在 Python 中正确打印 map 对象并实现字符位移加密

2026-02-07 18:09

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。

1541

2023.10.24

Go语言中的运算符有哪些

Go语言中的运算符有：1、加法运算符；2、减法运算符；3、乘法运算符；4、除法运算符；5、取余运算符；6、比较运算符；7、位运算符；8、按位与运算符；9、按位或运算符；10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

236

2024.02.23

php三元运算符用法

本专题整合了php三元运算符相关教程，阅读专题下面的文章了解更多详细内容。

127

2025.10.17

php三元运算符用法

本专题整合了php三元运算符相关教程，阅读专题下面的文章了解更多详细内容。

127

2025.10.17

if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词，用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章，供大家免费阅读。

803

2023.08.22

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口，提供最新章节抢先看方法、正版免费阅读指南，以及稳定访问方式，帮助用户快速直达包子漫画页面，无广告畅享全集漫画内容。

2026.02.10

MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法，提供免安装访问、不同版本（1.8.8、1.12.8）在线体验指南，以及正版网页端操作说明，帮助玩家轻松进入MC.JS世界，实现即时畅玩与高效体验。

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法，详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧，帮助用户轻松管理Gmail邮箱账户，实现高效、安全的邮箱使用体验。

2026.02.10

铁路12306订票与退改全攻略_高效购票与座位选取技巧

本专题全面汇总铁路12306订票、退票、改签及候补订单操作技巧，提供车厢座位分布参考、抢票攻略和高铁安检注意事项，帮助新手用户快速掌握高效购票与退改流程，提高出行效率和体验。

2026.02.10

热门下载

网站特效

网站源码

网站素材

前端模板