动态下拉菜单与表格联动：构建交互式前端表单-js教程-PHP中文网

动态下拉菜单与表格联动：构建交互式前端表单

本教程详细介绍了如何使用html、css和javascript实现动态下拉菜单与表格的联动显示。通过选择下拉菜单中的模型，关联的全新配件和回收配件将实时更新在两个独立的表格中。文章涵盖了数据结构设计、javascript逻辑实现、常见问题排查及现代前端开发实践，旨在帮助开发者构建响应式且用户友好的表单界面。

在现代前端开发中，创建交互式表单是常见的需求。本教程将指导您如何构建一个维修表单，该表单能够通过下拉菜单选择设备模型，并根据所选模型动态显示兼容的全新配件和回收配件列表。所有数据将硬编码在JavaScript中，确保应用可以在本地文件系统直接运行，无需部署到Web服务器。

1. 核心数据结构设计

首先，我们需要定义表单所需的数据。为了演示目的，我们将数据存储在JavaScript数组中。

skuData: 存储SKU信息，包括SKU编号、描述和价值。
modelData: 存储模型信息，包括品牌、代次和具体型号。
newPartsData: 存储全新配件信息，包括配件名称、价值、库存数量以及兼容的模型列表（以逗号分隔）。
salvagePartsData: 存储回收配件信息，结构与全新配件类似。

// SKU 数据
const skuData = [
    ["SKU1", "描述 1", "100"],
    ["SKU2", "描述 2", "200"],
    ["SKU3", "描述 3", "300"]
];

// 模型数据
const modelData = [
    ["品牌 1", "第一代", "型号 1"],
    ["品牌 2", "第二代", "型号 2"],
    ["品牌 3", "第三代", "型号 3"]
];

// 全新配件数据：[名称, 价值, 数量, 兼容模型]
const newPartsData = [
    ["配件 A", "10", "5", "型号 1,型号 2"],
    ["配件 B", "20", "3", "型号 1,型号 3"],
    ["配件 C", "30", "2", "型号 2,型号 3"]
];

// 回收配件数据：[名称, 价值, 数量, 兼容模型]
const salvagePartsData = [
    ["配件 D", "15", "4", "型号 1,型号 3"],
    ["配件 E", "25", "6", "型号 2,型号 3"],
    ["配件 F", "35", "2", "型号 1,型号 2"]
];

登录后复制

注意： 在现代JavaScript中，推荐使用 const 或 let 替代 var。const 用于声明常量（值不可重新赋值），let 用于声明变量（值可重新赋值）。

2. HTML 结构布局

接下来，我们构建表单的HTML骨架，包括输入框、下拉菜单和用于显示配件的表格。

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

<!DOCTYPE html>
<html>
<head>
    <title>维修表单</title>
    <style>
        /* CSS 样式将在下一节详细介绍 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px; /* 使用 gap 替代 <br> 进行布局 */
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        label {
            font-weight: bold;
            margin-bottom: 5px;
        }
        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
        }
        h2 {
            margin-top: 20px;
            margin-bottom: 10px;
            color: #333;
        }
        .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, .red-button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            color: white;
            margin-top: 15px;
        }
        .green-button {
            background-color: #4CAF50; /* 绿色 */
        }
        .red-button {
            background-color: #f44336; /* 红色 */
        }
    </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>

登录后复制

关键点：

onload="populateDropdowns()": 在页面加载完成后调用 populateDropdowns 函数来初始化下拉菜单。
onchange="populateTables()": 当“型号”下拉菜单的值改变时，调用 populateTables 函数来更新配件表格。
id 属性：用于JavaScript获取DOM元素。
<option value="">请选择型号</option>: 为“型号”下拉菜单添加一个默认的占位选项，提升用户体验。
使用CSS gap 属性来管理表单元素间的间距，避免使用 <br/> 标签进行布局，这是一种更现代和灵活的布局方式。

3. JavaScript 核心逻辑实现

现在，我们来实现动态填充下拉菜单和表格的JavaScript函数。

<script>
    // SKU 数据 (与上面HTML中的数据相同，这里再次列出以保持代码完整性)
    const skuData = [
        ["SKU1", "描述 1", "100"],
        ["SKU2", "描述 2", "200"],
        ["SKU3", "描述 3", "300"]
    ];

    // 模型数据
    const modelData = [
        ["品牌 1", "第一代", "型号 1"],
        ["品牌 2", "第二代", "型号 2"],
        ["品牌 3", "第三代", "型号 3"]
    ];

    // 全新配件数据：[名称, 价值, 数量, 兼容模型]
    const newPartsData = [
        ["配件 A", "10", "5", "型号 1,型号 2"],
        ["配件 B", "20", "3", "型号 1,型号 3"],
        ["配件 C", "30", "2", "型号 2,型号 3"]
    ];

    // 回收配件数据：[名称, 价值, 数量, 兼容模型]
    const salvagePartsData = [
        ["配件 D", "15", "4", "型号 1,型号 3"],
        ["配件 E", "25", "6", "型号 2,型号 3"],
        ["配件 F", "35", "2", "型号 1,型号 2"]
    ];

    /**
     * 填充 SKU 和 Model 下拉菜单
     */
    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]; // SKU 编号作为值
            option.textContent = `${item[1]} - ${item[2]}`; // 描述和价值作为显示文本
            skuDropdown.appendChild(option);
        });

        // 填充 Model 下拉菜单
        modelData.forEach(item => {
            const option = document.createElement('option');
            // 核心修正：option.value 应该设置为具体的型号 (item[2])
            // 原始问题在于这里错误地使用了 item[0] (品牌) 作为值
            option.value = item[2];
            option.textContent = `${item[0]} - ${item[1]} - ${item[2]}`; // 品牌、代次、型号作为显示文本
            modelDropdown.appendChild(option);
        });

        // 初始加载表格数据
        populateTables();
    }

    /**
     * 根据选定的型号填充全新配件和回收配件表格
     */
    function populateTables() {
        const modelSelection = document.getElementById('model').value;

        // 获取表格元素
        const newPartsTable = document.getElementById('new-parts-table');
        const salvagePartsTable = document.getElementById('salvaged-parts-table');

        // 清空现有表格内容并添加表头
        newPartsTable.innerHTML = "<thead><tr><th>配件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";
        salvagePartsTable.innerHTML = "<thead><tr><th>配件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";

        // 获取 tbody 元素以便追加行
        const newPartsTableBody = newPartsTable.querySelector('tbody');
        const salvagePartsTableBody = salvagePartsTable.querySelector('tbody');

        // 填充全新配件表格
        newPartsData.forEach(item => {
            // 检查当前配件的兼容模型是否包含选定的型号
            if (item[3].includes(modelSelection)) {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item[0]}</td>
                    <td>${item[2]}</td>
                    <td><input type="checkbox" name="new_parts[]" value="${item[0]}"></td>
                `;
                newPartsTableBody.appendChild(row);
            }
        });

        // 填充回收配件表格
        salvagePartsData.forEach(item => {
            if (item[3].includes(modelSelection)) {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item[0]}</td>
                    <td>${item[2]}</td>
                    <td><input type="checkbox" name="salvaged_parts[]" value="${item[0]}"></td>
                `;
                salvagePartsTableBody.appendChild(row);
            }
        });
    }

    /**
     * 检查选定配件的总价值并更新提交按钮状态
     */
    function checkValue() {
        // 阻止表单默认提交行为，否则页面会刷新
        event.preventDefault();

        const skuValue = parseInt(document.getElementById('sku').value); // 获取SKU的价值
        const newPartsCheckboxes = document.getElementsByName('new_parts[]');
        const salvagedPartsCheckboxes = document.getElementsByName('salvaged_parts[]');
        let totalValue = 0;

        // 计算全新配件的总价值
        for (let i = 0; i < newPartsCheckboxes.length; i++) {
            if (newPartsCheckboxes[i].checked) {
                const partName = newPartsCheckboxes[i].value;
                const partIndex = newPartsData.findIndex(item => item[0] === partName);
                if (partIndex !== -1) {
                    totalValue += parseInt(newPartsData[partIndex][1]);
                }
            }
        }

        // 计算回收配件的总价值
        for (let i = 0; i < salvagedPartsCheckboxes.length; i++) {
            if (salvagedPartsCheckboxes[i].checked) {
                const partName = salvagedPartsCheckboxes[i].value;
                const partIndex = salvagePartsData.findIndex(item => 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 = '通过';
        } else {
            submitButton.classList.remove('green-button');
            submitButton.classList.add('red-button');
            submitButton.textContent = '不通过';
        }
    }
</script>

登录后复制

代码解析与修正：

populateDropdowns() 函数的核心修正：

腾讯交互翻译
腾讯AI Lab发布的一款AI辅助翻译产品

183

查看详情
- 在填充 model 下拉菜单时，option.value 必须设置为 item[2]，即具体的型号名称（例如“型号 1”）。原始代码中错误地使用了 item[0]（品牌名称），导致 populateTables 函数无法正确匹配型号。
- 添加了一个默认的 <option value="">请选择型号</option>，这样在页面加载时，下拉菜单不会默认选中第一个选项，而是提示用户进行选择。
populateTables() 函数：
- 此函数负责根据选定的 modelSelection 过滤 newPartsData 和 salvagePartsData。
- item[3].includes(modelSelection) 是关键的过滤逻辑，它检查配件的兼容模型字符串是否包含当前选定的型号。
- 为了提高效率和可读性，清空表格内容时，我们直接操作 innerHTML 重新设置表头和空的 <tbody>，然后通过 querySelector('tbody') 获取 <tbody> 元素，再向其追加行。
- 动态创建表格行和单元格时，使用了模板字符串（` `）来简化HTML结构的构建。
checkValue() 函数：
- 此函数用于计算所有选定配件的总价值，并根据与SKU价值的比较来更新提交按钮的样式和文本。
- event.preventDefault(); 被添加到 checkValue 函数的开头，以防止表单在点击提交按钮时刷新页面，这在单页应用或需要JavaScript处理表单提交逻辑时非常重要。
- findIndex() 方法用于根据配件名称查找其在数据数组中的索引，从而获取对应的价值。
- 根据 totalValue 和 skuValue 的比较结果，动态添加或移除CSS类 (green-button 或 red-button)，并更新按钮文本。

4. 运行与调试

将上述HTML、CSS和JavaScript代码保存为一个 .html 文件（例如 repair_form.html），然后直接用浏览器打开该文件即可。由于所有数据和逻辑都在客户端处理，因此无需Web服务器。

调试提示：

使用浏览器的开发者工具（F12）检查控制台是否有错误信息。
在JavaScript代码中设置断点，逐步执行代码，观察变量的值，特别是 modelSelection 的值是否正确，以及 newPartsData.forEach 和 salvagePartsData.forEach 循环中 if (item[3].includes(modelSelection)) 条件是否按预期触发。

5. 总结与最佳实践

通过本教程，您已经学会了如何使用原生JavaScript实现动态下拉菜单与表格的联动。这种模式在各种交互式表单和数据展示场景中都非常实用。

最佳实践建议：

数据源管理： 对于更复杂的应用，数据通常来自后端API或本地存储（如LocalStorage）。将数据硬编码在JavaScript中仅适用于简单的演示或离线应用。
错误处理： 在实际项目中，应添加更多的错误处理机制，例如检查DOM元素是否存在，或者处理数据解析失败的情况。
性能优化： 对于包含大量数据的表格，频繁地操作 innerHTML 可能会影响性能。可以考虑使用文档片段（DocumentFragment）或虚拟DOM（如React、Vue等框架）来优化渲染性能。
可访问性： 确保表单元素具有正确的 label 关联，并考虑键盘导航等可访问性功能。
代码组织： 对于大型项目，可以将JavaScript代码拆分为多个模块，提高可维护性。