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

J*aScript实现下拉菜单联动表格数据展示教程

JavaScript实现下拉菜单联动表格数据展示教程

本教程详细介绍了如何使用纯j*ascript和html实现基于下拉菜单选择动态更新表格内容的功能。我们将通过一个维修表单的实例，解决下拉菜单值映射错误导致表格数据无法显示的问题，并引入现代j*ascript（const/let）和dom操作的最佳实践，旨在帮助开发者构建高效、可维护的客户端数据展示应用。

在现代Web应用开发中，根据用户的选择动态展示或过滤数据是一种常见需求。本教程将以一个维修表单为例，演示如何利用HTML下拉菜单和J*aScript实现两个关联表格（新品零件和旧件零件）的动态更新，确保用户选择特定型号后，仅显示该型号兼容的零件。

1. 核心HTML结构

首先，我们需要构建表单的基本HTML结构，包括输入字段、下拉菜单以及用于显示零件数据的表格。

<!DOCTYPE html>
<html>
<head>
    <title>维修表单</title>
    <style>
        /* CSS样式将在后续部分提供 */
    </style>
</head>
<body onload="populateDropdowns()">
    <h1>维修表单</h1>
    <form>
        <label for="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">序列号:</label>
        <input type="text" id="serial" name="serial" required>

        <label for="model">型号:</label>
        <select id="model" name="model" required onchange="populateTables()">
            <option value="">请选择型号</option> <!-- 添加默认选项 -->
        </select>

        <h2>新品零件</h2>
        <table class="table" id="new-parts-table"></table>

        <h2>旧件零件</h2>
        <table class="table" id="salvaged-parts-table"></table>

        <input type="submit" value="提交" id="submit-button" onclick="checkValue()">
    </form>
</body>
</html>

关键点：

  • id 属性：确保每个需要J*aScript操作的元素都有唯一的id，如sku、model、new-parts-table等。
  • onchange 事件：model 下拉菜单的 onchange="populateTables()" 属性是实现动态更新的核心，它会在用户选择型号时触发 populateTables 函数。
  • onload 事件：body 标签的 onload="populateDropdowns()" 会在页面加载完成后自动填充下拉菜单。
  • 默认选项：为 model 下拉菜单添加一个 value="" 的默认选项，可以提升用户体验，避免默认选中第一个值。

2. J*aScript数据管理与初始化

为了演示目的，我们将数据硬编码在J*aScript中。在实际应用中，这些数据通常会从后端API或本地存储中获取。

// J*aScript数据定义
const skuData = [
    ["SKU1", "Description 1", "Value 1"],
    ["SKU2", "Description 2", "Value 2"],
    ["SKU3", "Description 3", "Value 3"]
];

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

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"]
];

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"]
];

// 页面加载时填充下拉菜单
function populateDropdowns() {
    const skuDropdown = document.getElementById('sku');
    const modelDropdown = document.getElementById('model');

    // 填充SKU下拉菜单
    skuData.forEach(item => {
        const option = document.createElement('option');
        option.value = item[0];
        option.text = `${item[1]} - ${item[2]}`;
        skuDropdown.appendChild(option);
    });

    // 填充Model下拉菜单
    modelData.forEach(item => {
        const option = document.createElement('option');
        // 关键修正：model下拉菜单的value应为item[2] (型号名称)，而非item[0] (品牌)
        option.value = item[2]; 
        option.text = `${item[0]} - ${item[1]} - ${item[2]}`;
        modelDropdown.appendChild(option);
    });

    // 初始加载时填充表格（此时可能为空，因为modelDropdown默认未选择）
    // 如果希望默认显示所有零件，可以修改此逻辑
    populateTables(); 
}

关键修正与最佳实践：

  • 变量声明： 推荐使用 const 声明常量（如数据数组），使用 let 声明可变变量（如DOM元素引用），避免使用 var。这有助于代码的可读性和维护性，并避免变量提升带来的潜在问题。
  • Model下拉菜单值： 原始代码中 modelDropdown.appendChild(option) 这一步，option.value 被错误地设置为 item[0]（即品牌名称）。正确的做法是将其设置为 item[2]（即型号名称），因为后续的 populateTables 函数会根据此值来过滤零件数据。

3. 动态填充表格

populateTables 函数负责根据选定的型号过滤并显示相应的零件数据。

function populateTables() {
    const modelSelection = document.getElementById('model').value;

    // 获取并清空新品零件表格
    const newPartsTable = document.getElementById('new-parts-table');
    // 使用innerHTML重置表格内容，包括表头
    newPartsTable.innerHTML = "<thead><tr><th>零件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>"; 
    const newPartsTableBody = newPartsTable.querySelector('tbody'); // 获取tbody以便追加行

    // 填充新品零件表格
    newPartsData.forEach(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]; // 注意：此处显示的是item[2] (数量)，item[1]是值
            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);

            newPartsTableBody.appendChild(row); // 将行追加到tbody
        }
    });

    // 获取并清空旧件零件表格
    const salvagePartsTable = document.getElementById('salvaged-parts-table');
    salvagePartsTable.innerHTML = "<thead><tr><th>零件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";
    const salvagePartsTableBody = salvagePartsTable.querySelector('tbody');

    // 填充旧件零件表格
    salvagePartsData.forEach(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);

            salvagePartsTableBody.appendChild(row);
        }
    });
}

要点：

Motiff Motiff

Motiff是由猿辅导旗下的一款界面设计工具，定位为“AI时代设计工具”

Motiff 126 查看详情 Motiff
  • 获取选定值： document.getElementById('model').value 获取当前下拉菜单中选中的型号值。
  • 清空表格： table.innerHTML = "... "; 是清空表格并重新设置表头最直接的方法。
  • 条件渲染： item[3].includes(modelSelection) 是核心过滤逻辑，确保只有兼容当前选中型号的零件才会被添加到表格中。
  • DOM操作： 使用 document.createElement() 创建新的HTML元素（如 , , )，然后使用 appendChild() 将它们添加到DOM树中。这种方式比拼接大量HTML字符串更安全、更易维护。

    4. 提交按钮逻辑 (checkValue)

    checkValue 函数用于计算选定零件的总价值，并根据结果动态改变提交按钮的样式和文本。

    function checkValue() {
    // 阻止表单默认提交行为，以便J*aScript处理
    event.preventDefault(); 

    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(item => item[0] === partName);
            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(item => item[0] === partName);
            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 = '通过';
    } else {
        submitButton.classList.remove('green-button');
        submitButton.classList.add('red-button');
        submitButton.textContent = '不通过';
    }
}

    注意事项：

    • event.preventDefault(): 在 onclick 事件中调用此函数可以阻止表单的默认提交行为，允许J*aScript在提交前执行自定义逻辑。
    • SKU值处理： 示例中假设 SKU 的值是 "SKU1", "SKU2" 等，为了进行数值比较，需要将其转换为纯数字，例如 parseInt(document.getElementById('sku').value.replace('SKU', ''))。
    • findIndex： 用于查找数组中符合条件的元素的索引，进而获取其关联的价值数据。
    • CSS类操作： classList.add() 和 classList.remove() 是管理元素CSS类的推荐方法。

    5. CSS样式

    为了美化表单和表格，我们可以添加一些基本的CSS样式。

    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    form {
        display: flex;
        flex-direction: column;
        gap: 10px; /* 使用gap代替br标签进行间距控制 */
        width: 300px; /* 限制表单宽度 */
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    label {
        font-weight: bold;
        margin-top: 5px;
    }
    input[type="text"],
    select {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: calc(100% - 16px); /* 适应padding */
    }
    h1, h2 {
        color: #333;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 10px;
    }
    .table th, .table td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }
    .table th {
        background-color: #f2f2f2;
    }
    .green-button {
        background-color: #4CAF50; /* 绿色 */
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 20px;
    }
    .red-button {
        background-color: #f44336; /* 红色 */
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 20px;
    }
</style>

    最佳实践：

    • 间距控制： 推荐使用CSS的 margin、padding 或 Flexbox/Grid 布局的 gap 属性来控制元素之间的间距，而不是使用
      标签。这使得布局更灵活，更易于响应式设计。
    • 语义化： 保持HTML的语义化，让CSS负责样式。

    6. 完整代码示例

    将上述HTML、CSS和J*aScript代码整合到同一个 index.html 文件中，即可在本地浏览器中直接运行，无需Web服务器。

    <!DOCTYPE html>
<html>
<head>
    <title>维修表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            font-weight: bold;
            margin-top: 5px;
        }
        input[type="text"],
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            width: calc(100% - 16px);
        }
        h1, h2 {
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 10px;
        }
        .table th, .table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .table th {
            background-color: #f2f2f2;
        }
        .green-button {
            background-color: #4CAF50; /* 绿色 */
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 20px;
        }
        .red-button {
            background-color: #f44336; /* 红色 */
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
    <script>
        // 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"]
        ];

        function populateDropdowns() {
            const skuDropdown = document.getElementById('sku');
            const modelDropdown = document.getElementById('model');

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

            // Populate Model dropdown
            modelData.forEach(item => {
                const option = document.createElement('option');
                option.value = item[2]; // 修正：使用型号名称作为值

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


# 会在  # 影视行业百度推广营销  # 朔州英文网站推广厂家  # 页面seo什么意思  # 宿迁网站建设欢迎洽谈  # 镇江网站建设模板  # 十堰企业营销软文推广  # 网站建设知识偶像作文  # 新吁网站建设  # 创业者怎么做营销推广的  # 小新seo  # 的是  # 输入框  # 设置为  # 加载  # 将其  # css  # 推荐使用  # 清空  # 表单  # css样式  # 响应式设计  # 应用开发  # 后端  # ssl  # app  # 浏览器  # 编码  # html  # java  # javascript 


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


相关推荐： 申通快递物流信息查询 申通快递包裹状态追踪  解决C#跨线程访问XML对象的异常 安全的并发XML处理模式  Go语言中方法接收器的选择：值类型还是指针类型？  如何使用CSS Grid实现“大方块左侧，小方块右侧垂直堆叠”的水平布局  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  《百度畅听版》关闭兴趣推荐方法  虫虫漫画绿色安全入口_虫虫漫画绿色安全入口安全看漫画  qq邮箱怎么注册_QQ邮箱注册步骤与注意事项  基于 Flink 和 Kafka 实现高效流处理：连续查询与时间窗口  iPhone14无法连接蓝牙设备如何解决  微博网页版入口链接 微博网页版在线互动平台  使用AI在VS Code中将代码从一种语言翻译成另一种  漫蛙manwa官网浏览入口_漫蛙漫画网页版访问链接  热血江湖归来医师加点攻略  顺丰快递单号查询寄件人 顺丰寄件人查询入口  申通快件单号查询平台 申通包裹物流动态跟踪  《爱南宁》认证电动车方法  《雷电模拟器》截图方法介绍  word文档中的分隔符有哪些不同类型和用途_Word分隔符类型与用途方法  mysql中外键约束如何使用_mysql FOREIGN KEY操作  Dash应用中自定义HTML页面标题与网站图标（F*icon）的实用指南  《新三国志曹操传》游历事件袁尚突围攻略  《下一站江湖2》独孤剑诀习得方法  如何外贸网站设计-能留住客户提升用户体验！  Sublime怎么快速复制文件路径_Sublime右键菜单增强技巧  在J*a中如何实现在线问答与评分系统_问答评分项目开发方法说明  苹果如何下载nanobanana  如何在mysql中设计餐饮点餐系统_mysql点餐系统项目实战  金牛福袋获取攻略  C++中的explicit关键字有什么作用_C++类型转换控制与explicit使用  《漫蛙manwa2》防走失网页版链接2025  《磁力猫》最好用的磁官网  Three.js中动态更换3D模型纹理的教程  京东快递包裹信息查询入口 京东快递官方查询平台入口  《一起考教师》账号注销方法  如何在解析前预检查XML文件的完整性？ 比如检查文件大小或特定结束标签  谷歌浏览器官方镜像获取方法_谷歌浏览器网页版入口极速直达  之了课堂app做题入口  苹果手机如何清理系统缓存数据 iPhone非越狱清理垃圾文件的技巧【系统优化】  苹果iPhone14ProMax如何新建AppleID_iPhone14ProMax新建AppleID具体流程  服装短视频如何起号推广？服装短视频起号推广有什么要求？  基于键值条件高效映射 Pandas DataFrame 多列数据  在Django中动态检查模型关联：一种灵活的解决方案  WooCommerce购物车：强制显示所有交叉销售商品教程  KFC邀请码怎么使用领额外优惠_KFC邀请码输入方式与额外优惠代码获取方法  J*aScript 数值去小数位处理：多种方法与实践  怎样设置开机后自动运行某个程序_Windows启动文件夹与任务计划【自动化】  《淘票票》添加到苹果钱包教程  steam缓存文件在哪儿_steam缓存文件的路径查找方法与结构说明  微信如何设置字体大小_微信字体设置的阅读舒适 

 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.