首页 专区 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > js教程

JavaScript实现下拉菜单驱动的动态表格数据展示

落辰吖_1198

落辰吖_1198

2025-11-29

495人浏览

原创

JavaScript实现下拉菜单驱动的动态表格数据展示

本教程详细阐述了如何使用javascript和html实现下拉菜单驱动的动态表格数据展示。针对下拉菜单选择后表格内容不更新的问题，核心解决方案是确保下拉选项的`value`属性与数据源中的筛选字段准确匹配。文章还将介绍如何优化代码结构，包括使用`let`/`const`声明变量，以及通过添加默认占位选项提升用户体验，从而构建一个功能完善且易于维护的维修表单界面。

动态表格数据展示概述

在Web开发中，经常需要根据用户的选择动态更新页面内容。一个常见的场景是，用户通过下拉菜单选择一个选项，然后页面上的表格会根据该选择显示相关联的数据。本教程将以一个维修表单为例，演示如何实现这一功能：当用户从“型号”下拉菜单中选择一个型号时，页面下方“新零件”和“回收零件”两个表格将实时展示与该型号兼容的零件列表。

问题分析：下拉菜单值与数据筛选不匹配

最初的实现尝试中，用户反馈选择型号后，零件表格仅显示表头，内容为空。经过分析，主要问题出在model下拉菜单的选项值设置上，未能与后续数据筛选逻辑正确匹配。

在原始代码中，model下拉菜单的选项值（option.value）被设置为modelData数组中的第一个元素item[0]，它代表的是“品牌”（例如“Brand 1”）。然而，用于筛选零件数据的逻辑（item[3].includes(modelSelection)）期望modelSelection是一个“型号”（例如“Model 1”），因为newPartsData和salvagePartsData的第四个元素item[3]存储的是兼容型号的字符串（例如“Model 1,Model 2”）。

由于下拉菜单选中的值（品牌）与零件数据中存储的兼容信息（型号）不一致，导致item[3].includes(modelSelection)判断始终为假，因此表格内容无法被正确填充。

解决方案：精确匹配下拉菜单值与数据

解决此问题的关键在于确保model下拉菜单的option.value属性与数据源中用于筛选的字段值精确匹配。

JavaScript代码修正

我们需要修改populateDropdowns函数中为model下拉菜单创建选项的部分，将option.value从item[0]（品牌）更改为item[2]（型号）。

修正前（错误）：

// Populate Model dropdown
modelData.forEach(function (item) {
    var option = document.createElement('option');
    option.value = item[0]; // 错误：这里是品牌
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
});

修正后（正确）：

// Populate Model dropdown
modelData.forEach(function (item) {
    var option = document.createElement('option');
    option.value = item[2]; // 正确：这里是型号
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
});

通过这一修改，当用户选择一个型号时，modelSelection变量将正确获取到“Model 1”、“Model 2”等型号字符串，从而使populateTables函数中的筛选逻辑能够正常工作，将匹配的零件数据填充到表格中。

完整JavaScript代码

以下是修正后的完整JavaScript代码，它包含了数据定义、下拉菜单和表格填充逻辑，以及一个简单的值检查功能。

// SKU data
const skuData = [
  ["SKU1", "Description 1", "Value 1"],
  ["SKU2", "Description 2", "Value 2"],
  ["SKU3", "Description 3", "Value 3"]
];

// Model data
const modelData = [
  ["Brand 1", "Gen 1", "Model 1"],
  ["Brand 2", "Gen 2", "Model 2"],
  ["Brand 3", "Gen 3", "Model 3"]
];

// New parts data
const newPartsData = [
  ["Part 1", "10", "5", "Model 1,Model 2"],
  ["Part 2", "20", "3", "Model 1,Model 3"],
  ["Part 3", "30", "2", "Model 2,Model 3"]
];

// Salvaged parts data
const salvagePartsData = [
  ["Part 4", "15", "4", "Model 1,Model 3"],
  ["Part 5", "25", "6", "Model 2,Model 3"],
  ["Part 6", "35", "2", "Model 1,Model 2"]
];

/**
 * 填充SKU和Model下拉菜单。
 */
function populateDropdowns() {
  const skuDropdown = document.getElementById('sku');
  const modelDropdown = document.getElementById('model');

  // Populate SKU dropdown
  skuData.forEach(function(item) {
    const option = document.createElement('option');
    option.value = item[0];
    option.text = item[1] + " - " + item[2];
    skuDropdown.appendChild(option);
  });

  // Populate Model dropdown
  // 注意：这里将option.value设置为item[2]（型号），以匹配零件数据的筛选逻辑
  modelData.forEach(function(item) {
    const option = document.createElement('option');
    option.value = item[2]; // 修正点：使用型号作为值
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
  });

  // 初始时填充表格
  populateTables();
}

/**
 * 根据当前选中的型号填充“新零件”和“回收零件”表格。
 */
function populateTables() {
  const modelSelection = document.getElementById('model').value;

  // Populate New Parts table
  const newPartsTable = document.getElementById('new-parts-table');
  // 清空并重置表格头部
  newPartsTable.innerHTML = "<thead><tr>
<th>Part</th>
<th>Quantity</th>
<th>Select</th>
</tr></thead><tbody>";

  newPartsData.forEach(function(item) {
    // 只有当选中型号与零件兼容时才添加行
    if (item[3].includes(modelSelection)) {
      const row = document.createElement('tr');
      const partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      const quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      const selectCell = document.createElement('td');
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'new_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      newPartsTable.appendChild(row);
    }
  });
  newPartsTable.innerHTML += "</tbody>"; // 确保tbody标签闭合

  // Populate Salvaged Parts table
  const salvagePartsTable = document.getElementById('salvaged-parts-table');
  // 清空并重置表格头部
  salvagePartsTable.innerHTML = "<thead><tr>
<th>Part</th>
<th>Quantity</th>
<th>Select</th>
</tr></thead><tbody>";

  salvagePartsData.forEach(function(item) {
    // 只有当选中型号与零件兼容时才添加行
    if (item[3].includes(modelSelection)) {
      const row = document.createElement('tr');
      const partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      const quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      const selectCell = document.createElement('td');
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'salvaged_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      salvagePartsTable.appendChild(row);
    }
  });
  salvagePartsTable.innerHTML += "</tbody>"; // 确保tbody标签闭合
}

/**
 * 检查选中零件的总价值与SKU值的关系，并更新提交按钮状态。
 */
function checkValue() {
  const skuValue = parseInt(document.getElementById('sku').value.replace('SKU', '')); // 假设SKU值可解析为数字
  const newParts = document.getElementsByName('new_parts[]');
  const salvagedParts = document.getElementsByName('salvaged_parts[]');
  let totalValue = 0;

  for (let i = 0; i <h3>优化与最佳实践</h3><p>除了核心的功能修正，我们还可以对代码进行一些优化，以提升其可读性、可维护性和用户体验。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
														src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
													<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><h4>现代JavaScript变量声明：let与const</h4><p>在现代JavaScript中，推荐使用const和let替代var来声明变量。</p>
  • const用于声明常量，一旦赋值后不能再修改。对于像skuData、modelData等在程序运行期间不会改变的数据数组，使用const可以明确其不变性。
  • let用于声明可变变量，其作用域为块级作用域。对于循环变量i或在函数内部可能重新赋值的变量，使用let是更佳选择。 这有助于避免var带来的作用域问题（函数作用域和变量提升），使代码更易于理解和调试。

提升用户体验：添加默认占位选项

为了提升用户体验，建议在model下拉菜单中添加一个默认的占位选项（例如“请选择型号”）。这样，在页面加载时，用户会明确知道需要进行选择，而不是默认选中第一个型号并立即触发表格更新。

在HTML中添加一个默认选项：

<label for="model">Model:</label>
<select id="model" name="model" required onchange="populateTables()"><option value="">Select Model</option>
<!-- 添加此行 --></select>

注意： 默认选项的value可以为空字符串，这样在populateTables函数中，modelSelection如果为空，表格将不会显示任何零件，这是合理的初始状态。

HTML结构优化：避免不必要的
标签

在HTML中，
标签用于强制换行，但它主要用于文本内容。对于布局和元素之间的间距，更推荐使用CSS来控制。例如，可以使用margin、padding或者Flexbox/Grid布局来管理表单元素之间的空间，使HTML结构更语义化，CSS样式更灵活。

推荐的CSS布局示例：

form {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制表单元素之间的间距 */
  width: 250px;
}
/* 其他样式保持不变 */

通过这种方式，可以在HTML中移除不必要的
标签，使代码更整洁。

本地运行兼容性

此解决方案完全基于客户端的HTML、CSS和JavaScript，无需后端服务器支持。这意味着您可以直接在浏览器中打开HTML文件，即可在本地运行和测试该维修表单。

完整示例代码

下面是整合了所有修正和优化建议的完整代码。

HTML (index.html):



    <title>Repair Form</title><style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 10px; /* 控制表单元素之间的间距 */
            width: 300px; /* 调整表单宽度 */
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        label {
            font-weight: bold;
            margin-bottom: 2px;
        }

        input[type="text"],
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box; /* 确保padding和border包含在宽度内 */
        }

        h1, h2 {
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .table th, .table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        .table th {
            background-color: #eee;
        }

        .green-button {
            background-color: green;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 15px;
        }

        .red-button {
            background-color: red;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 15px;
        }
    </style><script src="script.js"></script><!-- 引入外部JavaScript文件 --><h1>Repair Form</h1>

New Parts

Salvaged Parts

JavaScript (script.js - 将上述完整的JavaScript代码放入此文件):

// SKU data
const skuData = [
  ["SKU1", "Description 1", "Value 1"],
  ["SK

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南

相关文章

如何使用 CSS 将文字精准居中覆盖在图片上

Bootstrap 5 中模态框 CSS 变量的正确使用方式

如何使用 CSS 将文字精确居中覆盖在图片上

WorkBuddy代码模型怎么修复前端样式问题详细指南

如何在PHP8.3中安装Laravel10与Vite
驱动精灵
驱动精灵

驱动精灵基于驱动之家十余年的专业数据积累，驱动支持度高，已经为数亿用户解决了各种电脑驱动问题、系统故障，是目前有效的驱动软件，有需要的小伙伴快来保存下载体验吧！

下载

相关标签:

css javascript java html js 浏览器 ssl html文件 作用域

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

上一篇：使用Google服务账号实现Google Drive API无缝集成与文件访问

下一篇：Chart.js 教程：自定义插件实现图表与图例间距调整

作者最新文章

JavaScript 面向对象编程中正确绑定事件与类方法的实践指南

如何在 Vue 项目中正确启用 Swiper.js 的导航按钮与分页器

如何在页面卸载前自定义提示并安全提交考试表单

如何在浏览器刷新或跳转前弹出确认提示并执行自定义逻辑

如何在浏览器刷新或离开页面前弹出确认提示并执行提交逻辑

如何在页面卸载前自定义提示并安全提交考试数据

为动态生成的元素分配唯一 ID 并按顺序绑定编号

React 中函数组件内实现可选登录方法的正确模式

React 中使用函数组件实现可复用登录方法的正确实践

如何让 PDF 链接支持右键“在新标签页中打开”

热门AI工具

更多
豆包大模型

豆包大模型

 立刻MV

立刻MV

Hot VibeKnow

VibeKnow

Hot 二狗PPT

二狗PPT

Hot DeepSeek

DeepSeek

 LibLibAI

LibLibAI

Hot Seko

Seko

Hot 超级简历WonderCV

超级简历WonderCV

Hot

相关专题

更多
java基础知识汇总
java基础知识汇总

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

2023.10.24

5684

49

c语言const用法
c语言const用法

const是关键字，可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍：1、声明常量，const关键字可用于声明常量，常量的值在程序运行期间不可修改，常量可以是基本数据类型，如整数、浮点数、字符等，也可是自定义的数据类型；2、函数参数中的const修饰符，const关键字可用于函数的参数中，表示该参数在函数内部不可修改等等。

2023.09.20

1878

7

js 字符串转数组
js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

2023.08.03

1518

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2023.09.04

2164

5

java基础知识汇总
java基础知识汇总

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

2023.10.24

5684

49

字符串介绍
字符串介绍

字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

2023.11.24

4649

6

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。

2024.03.22

6394

16

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式：单引号；双引号；heredoc语法等等。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

2024.04.29

8454

11

go语言字符串相关教程
go语言字符串相关教程

本专题整合了go语言字符串相关教程，阅读专题下面的文章了解更多详细内容。

2025.07.29

4279

17

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.5万人学习

CSS教程
CSS教程

共754课时 | 93.1万人学习

最新文章

更多
如何让 PDF 链接支持右键“在新标签页中打开”
React 中使用函数组件实现可复用登录方法的正确实践
React 中函数组件内实现可选登录方法的正确模式
JavaScript 中怎么用 WebSocket 实现云端编译进度实时展示
JavaScript 中怎么把字符串转成节点并插入页面
JavaScript 中怎么实现全局异步异常统一上报埋点
JavaScript 中 ES Modules 怎么导出多个命名变量
JavaScript 中事件循环怎么配合 requestAnimationFrame
JavaScript 中原型链怎么导致内存泄漏怎么排查
JavaScript 中 npm 怎么配置全局命令行快捷方式