JavaScript实现下拉菜单联动表格数据展示教程-js教程-PHP中文网

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

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

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

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

2. JavaScript数据管理与初始化

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

立即学习“Java免费学习笔记（深入）”；

// JavaScript数据定义
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 函数负责根据选定的型号过滤并显示相应的零件数据。

笔魂AI

笔魂AI绘画-在线AI绘画、AI画图、AI设计工具软件

403

查看详情

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);
        }
    });
}

登录后复制

要点：

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

4. 提交按钮逻辑 (checkValue)

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

function checkValue() {
    // 阻止表单默认提交行为，以便JavaScript处理
    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 事件中调用此函数可以阻止表单的默认提交行为，允许JavaScript在提交前执行自定义逻辑。
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 属性来控制元素之间的间距，而不是使用 <br/> 标签。这使得布局更灵活，更易于响应式设计。
语义化： 保持HTML的语义化，让CSS负责样式。

6. 完整代码示例

将上述HTML、CSS和JavaScript代码整合到同一个 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]; // 修正：使用型号名称作为值

登录后复制

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