运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

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

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

本教程详细阐述了如何使用j*ascript和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属性与数据源中用于筛选的字段值精确匹配。

J*aScript代码修正

我们需要修改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函数中的筛选逻辑能够正常工作，将匹配的零件数据填充到表格中。

完整J*aScript代码

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

// 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 < newParts.length; i++) {
    if (newParts[i].checked) {
      const partName = newParts[i].value;
      const partIndex = newPartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      if (partIndex !== -1) { // 确保找到零件
        totalValue += parseInt(newPartsData[partIndex][1]);
      }
    }
  }

  for (let i = 0; i < salvagedParts.length; i++) {
    if (salvagedParts[i].checked) {
      const partName = salvagedParts[i].value;
      const partIndex = salvagePartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      if (partIndex !== -1) { // 确保找到零件
        totalValue += parseInt(salvagePartsData[partIndex][1]);
      }
    }
  }

  const submitButton = document.getElementById('submit-button');
  if (totalValue < skuValue) {
    submitButton.classList.remove('red-button');
    submitButton.classList.add('green-button');
    submitButton.textContent = 'Pass';
  } else {
    submitButton.classList.remove('green-button');
    submitButton.classList.add('red-button');
    submitButton.textContent = 'Nix';
  }
}

优化与最佳实践

除了核心的功能修正，我们还可以对代码进行一些优化，以提升其可读性、可维护性和用户体验。

现代J*aScript变量声明：let与const

在现代J*aScript中，推荐使用const和let替代var来声明变量。

Viggle AI Video Viggle AI Video

Powerful AI-powered animation tool and image-to-video AI generator.

Viggle AI Video 115 查看详情 Viggle AI Video
  • 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和J*aScript，无需后端服务器支持。这意味着您可以直接在浏览器中打开HTML文件，即可在本地运行和测试该维修表单。

完整示例代码

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

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <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> <!-- 引入外部J*aScript文件 -->
</head>
<body onload="populateDropdowns()">
    <h1>Repair Form</h1>
    <form onsubmit="event.preventDefault(); checkValue();"> <!-- 阻止表单默认提交行为 -->
        <label for="technician">Technician:</label>
        <input type="text" id="technician" name="technician" required>

        <label for="sku">SKU:</label>
        <select id="sku" name="sku" required></select>

        <label for="serial">Serial:</label>
        <input type="text" id="serial" name="serial" required>

        <label for="model">Model:</label>
        <select id="model" name="model" required onchange="populateTables()">
            <option value="">Select Model</option> <!-- 添加默认占位选项 -->
        </select>

        <h2>New Parts</h2>
        <table class="table" id="new-parts-table"></table>

        <h2>Salvaged Parts</h2>
        <table class="table" id="salvaged-parts-table"></table>

        <input type="submit" value="Check Value" id="submit-button" class="green-button">
    </form>
</body>
</html>

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

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

以上就是J*aScript实现下拉菜单驱动的动态表格数据展示的详细内容，更多请关注其它相关文章！


# 这一  # seo的粉丝  # oppo手机营销和推广建议  # 长春茶叶网站建设  # 品质营销推广公司怎么样  # 前端如何考虑seo优化  # 麻江新闻营销推广  # 百度seo渠道网站  # 服务行业的网站推广  # 南昌知名营销推广  # SEO的内容及优化目的  # 时才  # 设置为  # 推荐使用  # 第一个  # 为空  # css  # 的是  # 表单  # AI-powered  # 作用域  # html文件  # ai  # 后端  # ssl  # app  # 浏览器  # js  # html  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： AO3中文版手机快速通道_AO3最新稳定链接更新  Mac如何开启画中画模式_Mac Safari浏览器视频画中画功能  电脑的“恢复环境(WinRE)”找不到怎么办_Windows系统恢复环境重建【高级修复】  word文档行距怎么调？word文档调行距的操作步骤  macosmonterey系统外接显示器驱动怎么安装_macosmonterey外接显示器驱动与分辨率调整  包子漫画官网链接官方地址 包子漫画在线观看官网首页入口  江苏大剧院会员卡购买步骤  Sublime怎么配置YAML文件格式化_Sublime YAML Formatter插件教程  windows10怎么设置电源按钮_windows10按下电源键功能修改  sublime怎么快速在浏览器中预览HTML_sublime配置View in Browser教程  知乎APP怎么查看自己被邀请的问题_知乎APP邀请回答记录查看与参与方法  全球各国上班时间表外贸邮件时间  QQ阅读小说搜索入口地址_QQ阅读小说搜索入口地址搜索在线阅读  PSD转AI文件的简单方法  《狐友》联系客服方法  VBA Outlook邮件自动化：高效集成Excel数据与列标题的策略  创客贴登录页面入口 创客贴网页版最新网址链接  sublime怎么在文件中显示代码结构大纲_sublime符号列表功能  win11怎么启用或禁用休眠 Win11 powercfg命令管理休眠文件【技巧】  《360浏览器》设置摄像头权限方法  vivo手机视频通话美颜怎么设置_vivo视频通话美颜开启方法  荣耀 Magic10 Pro 系统更新提示失败_荣耀 Magic10 Pro 升级修复  SQLAlchemy 2.0 与 Pydantic 模型类型安全集成指南  在VS Code中利用AI辅助进行代码迁移  word表格如何按某一列内容进行排序_Word表格按列排序方法  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  吃完饭就犯困是什么原因 餐后嗜睡如何缓解  Win11如何分屏操作_Win11多窗口分屏技巧  如何在mysql中使用索引提示_mysql索引提示优化方法  TikTok搜索结果不显示怎么办 TikTok搜索刷新与优化方法  Lar*el Eloquent中通过Join查询关联数据表：解决多行子查询问题  抖音号升级企业号怎么改名字？升级企业号有哪些好处？  圆通快递包裹轨迹查询 圆通速递快件实时位置跟踪  Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理  Dash应用中自定义HTML页面标题与网站图标（F*icon）的实用指南  PHP中实现JSON数据数组分页的教程  J*aScript调试技巧_性能分析与内存快照  Excel怎么用XLOOKUP函数实现双向查找_ExcelXLOOKUP替代VLOOKUP+HLOOKUP的高级用法  J*aScript文本高亮功能优化：解决多词匹配错误与精确分割策略  《procreate》绘制渐变效果教程  如何用mysql实现客户反馈管理_mysql客户反馈数据库方法  怎样让Windows 11的开始菜单恢复经典样式_Open-Shell工具使用指南【怀旧】  动漫岛在线动漫网 动漫岛动漫在线观看官方入口  智慧团建活动报名入口 智慧团建活动报名入口手机端官网​  Sublime怎么快速复制文件路径_Sublime右键菜单增强技巧  荣耀magicv5怎么上手测评  PHP odbc_fetch_array 返回值处理：如何正确访问嵌套数组元素  百度网盘如何设置上传限额  毒蘑菇VOLUMESHADER_BM官网首页登录入口 毒蘑菇VOLUMESHADER_BM官网首页登录入口说明  《地下城堡4：骑士与破碎编年史》墓穴挑战125攻略 

 2025-11-29

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.