使用J*aScript实现下拉菜单动态更新表格内容的教程

发布时间：2025-11-28

点击量：

使用JavaScript实现下拉菜单动态更新表格内容的教程

本教程详细介绍了如何利用纯j*ascript实现html下拉菜单与表格内容的动态联动。通过一个维修表单示例，我们将学习如何根据下拉菜单选择的模型，实时过滤并展示兼容的新旧零件数据。内容涵盖了数据结构定义、下拉菜单和表格的动态填充、事件监听、以及现代j*ascript的最佳实践，确保即使在本地环境也能高效运行。

在前端开发中，根据用户在下拉菜单中的选择动态更新页面内容是一种常见的交互需求。本教程将以一个维修表单为例，演示如何使用原生J*aScript实现这一功能，即当用户选择不同的产品型号时，两个相关零件表格（新零件和旧零件）能够实时显示与该型号兼容的零件列表。

1. HTML结构准备

首先，我们需要搭建基本的HTML骨架，包括表单元素、下拉菜单以及用于显示零件的表格。

<!DOCTYPE html>
<html>
<head>
    <title>维修表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 15px; /* 使用gap代替br来控制间距 */
            width: 300px;
            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;
            font-size: 14px;
            width: calc(100% - 16px); /* 考虑padding */
        }
        h1, h2 {
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background-color: #fff;
        }
        .table th, .table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .table th {
            background-color: #eee;
            font-weight: bold;
        }
        .green-button {
            background-color: #4CAF50; /* 绿色 */
            color: white;
            padding: 10px 15px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .green-button:hover {
            background-color: #45a049;
        }
        .red-button {
            background-color: #f44336; /* 红色 */
            color: white;
            padding: 10px 15px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .red-button:hover {
            background-color: #da190b;
        }
    </style>
</head>
<body onload="populateDropdowns()">
    <h1>维修表单</h1>
    <form onsubmit="return false;"> <!-- 阻止表单默认提交行为 -->
        <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>

HTML结构关键点：

onload="populateDropdowns()": 在页面加载完成后调用J*aScript函数来填充下拉菜单。
onchange="populateTables()": 当“型号”下拉菜单的值改变时，调用J*aScript函数来更新表格内容。
: 为型号下拉菜单添加一个默认的占位选项，提升用户体验。
表单的 onsubmit="return false;" 用于阻止默认的提交行为，因为我们通过J*aScript处理逻辑。
使用CSS的 gap 属性代替
标签来控制表单元素的间距，这是一种更现代和灵活的布局方式。

2. J*aScript核心逻辑

J*aScript部分将负责数据的管理、下拉菜单的填充、以及根据选择动态更新表格。

<script>
    // 使用let或const声明变量，推荐使用const对于固定数据，let对于可能改变的数据
    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"]
    ];

    /**
     * 填充SKU和型号下拉菜单
     */
    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.textContent = `${item[1]} - ${item[2]}`;
            skuDropdown.appendChild(option);
        });

        // 填充型号下拉菜单
        // 关键修正：option.value 应该设置为型号名称 (item[2])
        modelData.forEach(item => {
            const option = document.createElement('option');
            option.value = item[2]; // 将型号名称作为option的值
            option.textContent = `${item[0]} - ${item[1]} - ${item[2]}`;
            modelDropdown.appendChild(option);
        });

        // 页面加载时，如果modelDropdown有默认值（例如通过服务器渲染），则可以立即填充表格
        // 如果没有，则在用户选择后populateTables()会被onchange触发
        // 此处不再立即调用populateTables，因为我们添加了“请选择型号”的默认空选项
        // populateTables(); 
    }

    /**
     * 根据选择的型号填充新零件和旧零件表格
     */
    function populateTables() {
        const modelSelection = document.getElementById('model').value;

        // 如果没有选择型号，则清空表格并返回
        if (!modelSelection) {
            document.getElementById('new-parts-table').innerHTML = "";
            document.getElementById('salvaged-parts-table').innerHTML = "";
            return;
        }

        // 填充新零件表格
        const newPartsTable = document.getElementById('new-parts-table');
        // 清空现有内容并添加表头
        newPartsTable.innerHTML = "<thead><tr><th>零件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";
        const newPartsTableBody = newPartsTable.querySelector('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]是库存数量
                row.appendChild(quantityCell);

                const selectCell = document.createElement('td');
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.name = 'new_parts[]';
                checkbox.value = item[0];
                // 添加事件监听器，以便在选择零件时更新总价值和按钮状态
                checkbox.addEventListener('change', checkValue); 
                selectCell.appendChild(checkbox);
                row.appendChild(selectCell);

                newPartsTableBody.appendChild(row);
            }
        });

        // 填充旧零件表格 (逻辑与新零件表格类似)
        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]; // 假设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];
                checkbox.addEventListener('change', checkValue);
                selectCell.appendChild(checkbox);
                row.appendChild(selectCell);

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

    /**
     * 检查选定零件的总价值并更新提交按钮状态
     */
    function checkValue() {
        // 将SKU的值从字符串转换为整数，并处理可能为空的情况
        const skuDropdown = document.getElementById('sku');
        const skuValue = parseInt(skuDropdown.options[skuDropdown.selectedIndex].text.split(' - ')[2]) || 0; // 假设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 part = newPartsData.find(item => item[0] === partName);
                if (part) {
                    totalValue += parseInt(part[1]); // 假设item[1]是零件的价值
                }
            }
        }

        // 计算旧零件的总价值
        for (let i = 0; i < salvagedParts.length; i++) {
            if (salvagedParts[i].checked) {
                const partName = salvagedParts[i].value;
                const part = salvagePartsData.find(item => item[0] === partName);
                if (part) {
                    totalValue += parseInt(part[1]); // 假设item[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>

J*aScript关键点：

数据声明 (const / let):
来画数字人|直播|
来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。
57 查看详情
- 现代J*aScript推荐使用 const 和 let 替代 var。
- const 用于声明常量，一旦赋值不能重新分配。
- let 用于声明变量，其值可以被重新分配。
- 对于 skuData, modelData, newPartsData, salvagePartsData 这些在运行时不改变的数据，使用 const 更为合适。
populateDropdowns() 函数:
- 型号下拉菜单的 option.value 修正: 原始代码将 item[0] (品牌) 作为型号下拉菜单的值，导致无法正确匹配零件。已修正为 option.value = item[2]，确保下拉菜单的值是实际的“型号名称”（例如“Model 1”）。
- option.textContent 用于设置选项在下拉菜单中显示的内容。
- 为了更好的用户体验，不再在 populateDropdowns 内部直接调用 populateTables()，因为默认选项“请选择型号”应该为空。当用户真正选择一个型号后，onchange 事件会触发 populateTables()。
populateTables() 函数:
- 获取选定值: document.getElementById('model').value 获取当前选择的型号。
- 清空并重建表格: newPartsTable.innerHTML = "... "; 是一种有效清空表格并重新添加表头的方式。然后通过 newPartsTable.querySelector('tbody') 获取到 tbody 元素，将动态生成的行添加到其中。
- 数据过滤: 使用 forEach 遍历零件数据，并通过 item[3].includes(modelSelection) 判断当前零件是否兼容选定型号。item[3] 存储了兼容型号的字符串，如 "Model 1,Model 2"。
- 动态创建元素: 使用 document.createElement() 创建 , , , input 等HTML元素，并使用 appendChild() 将它们添加到DOM中。
- Checkbox 事件监听: 为每个动态生成的复选框添加 change 事件监听器，使其在状态改变时能实时调用 checkValue() 函数，更新提交按钮的状态。
- checkValue() 函数:
  - 此函数负责计算所有选定零件的总价值，并根据与SKU值的比较来更新提交按钮的样式和文本。
  - 注意 skuValue 的获取方式，它从SKU下拉菜单的文本中解析出数值，这需要根据实际数据格式进行调整。
  - findIndex 或 find 方法用于在零件数据数组中查找匹配的零件，以便获取其价值。

以上就是使用J*aScript实现下拉菜单动态更新表格内容的教程的详细内容，更多请关注其它相关文章！

标签：# css # 推荐使用 # 如果没有 # 弹出 # 加载 # 如何使用 # 德阳专业网站推广费用 # 招网络营销推广员要求 # 推广教程优化网站整站 # 网站优化建设价钱 # 网站建设推广优化话术 # 汇创云SEO # 六安网站建设和应用平台 # 定制商城网站建设 # 关于网站推广类的书 # 是一种 # 数据结构 # 清空 # vue # react # javascript # java # html # js # 前端 # json # ajax # 编码 # 浏览器 # ap # 表单 # 请选择 # 广东网站建设哪里好做些

上一篇：Mapbox GL JS 大规模标记点性能优化指南

下一篇：Vue v-for 指令中字符串类型 Props 导致渲染失

使用J*aScript实现下拉菜单动态更新表格内容的教程

发布时间：2025-11-28

点击量：

1. HTML结构准备

2. J*aScript核心逻辑

3. 注意事项与最佳实践

总结

返回

使用J*aScript实现下拉菜单动态更新表格内容的教程

发布时间：2025-11-28

点击量：

1. HTML结构准备

2. J*aScript核心逻辑

3. 注意事项与最佳实践

总结

返回

4008988990