如何根据下拉选项动态显示或隐藏表格行（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; }）管理样式，更利于主题定制与动画过渡。

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

Getimg.ai

getimg.ai是一套神奇的ai工具。生成大规模的原始图像

下载

如何让 jQuery 脚本仅作用于页面中特定的 div 或区块

如何用单个函数处理多个按钮的点击事件并简化代码

如何让 JavaScript 的显隐切换功能可重复触发？

如何让 jQuery 脚本仅作用于页面中特定的或区块

如何让 jQuery 脚本仅作用于页面中指定的 div 或区块

相关标签:

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

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

上一篇：浏览器与 Node.js 中 new URL() 行为差异及标准化兼容方案下一篇：暂无

作者最新文章

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

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中文网学习。

1518

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什么意思的相关文章，供大家免费阅读。

799

2023.08.22

Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.06

java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南，帮助用户快速找到官方网站入口，了解如何进行批发采购、货源选择以及厂家直销等功能，提升采购效率与平台使用体验。

640

2026.02.06

快手网页版入口与电脑端使用指南快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法，详细提供快手官网直接访问链接、网页端操作教程，以及如何无需下载安装直接观看短视频的方式，帮助用户轻松浏览和观看快手短视频内容。

358

2026.02.06

热门下载

网站特效

网站源码

网站素材

前端模板