求助：如何用JavaScript从select的data-id计算金额并入库？

我看了你的代码和需求，发现几个关键问题导致功能没实现，现在帮你修正并实现完整功能：

原代码的核心问题 #

• 自定义属性混用：有的选项用dataid，有的用data-id，不符合HTML规范，也会导致无法正确获取值
• 取错了计算值：你用了options[selectedIndex].value（比如"milk"）来计算金额，而不是data-id里的数字
• 没有限制重复选择：同一个选项可以被多次选中
• 总金额（test4）没有更新逻辑
• 直接使用id作为全局变量，虽然浏览器支持，但代码不够健壮

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<select id="goods" onchange="handleSelectChange('goods')" size="4">
<option value="-">--</option>
<option value="milk" data-id="10">milk</option>
<option value="banana" data-id="12">banana</option>
<option value="apple" data-id="13">apple</option>
</select>
<br>
金额：<span id="summ">0</span>卢布<br>
<select id="go" onchange="handleSelectChange('go')" size="4">
<option value="-">--</option>
<option value="milk" data-id="100">milk</option>
<option value="banana" data-id="120">banana</option>
<option value="apple" data-id="130">apple</option>
</select>
<br>
金额：<span id="sum">0</span>卢布<br>
已选择：<br>
<span id="list"></span>
总金额：<span id="test4" name="test4">0</span>卢布<br>

<script>
// 存储已选的选项value，防止重复选择
const selectedItems = new Set();

function handleSelectChange(selectId) {
    const select = document.getElementById(selectId);
    const selectedOption = select.options[select.selectedIndex];
    const optionValue = selectedOption.value;
    const optionText = selectedOption.text;
    // 跳过默认选项
    if (optionValue === "-") return;

    // 检查是否已选
    if (selectedItems.has(optionValue)) {
        alert(`${optionText} 已经被选择过了！`);
        // 重置选中到默认选项
        select.selectedIndex = 0;
        return;
    }

    // 获取data-id的金额值
    const amount = parseInt(selectedOption.dataset.id);
    if (isNaN(amount)) {
        alert("无效的金额数据！");
        select.selectedIndex = 0;
        return;
    }

    // 更新对应下拉框的金额
    const sumElementId = selectId === "goods" ? "summ" : "sum";
    const sumElement = document.getElementById(sumElementId);
    sumElement.innerText = parseInt(sumElement.innerText) + amount;

    // 添加到已选列表
    selectedItems.add(optionValue);
    const listElement = document.getElementById("list");
    listElement.innerHTML += `${optionText} (${amount}卢布)<br>`;

    // 更新总金额
    updateTotalAmount();

    // 禁用已选的选项，防止再次选择
    selectedOption.disabled = true;
    // 重置选中到默认选项
    select.selectedIndex = 0;
}

function updateTotalAmount() {
    const summ = parseInt(document.getElementById("summ").innerText);
    const sum = parseInt(document.getElementById("sum").innerText);
    const total = summ + sum;
    document.getElementById("test4").innerText = total;
}
</script>
</body>
</html>

功能说明 #

1. 统一自定义属性：所有选项都用标准的data-id属性存储金额值，符合HTML规范
2. 防止重复选择：用Set存储已选的选项value，选择前检查，已选则提示并重置选择
3. 正确获取金额：通过selectedOption.dataset.id获取data-id的值，转为数字计算，避免用商品名称错误累加
4. 金额累加与总金额更新：每次选择后更新对应下拉框的金额，并自动重新计算两个下拉框的总金额
5. 禁用已选选项：选中后的选项会被禁用，彻底防止重复选择
6. 健壮性优化：添加了金额有效性检查，避免非数字导致的计算错误
7. 代码复用：用同一个处理函数handleSelectChange处理两个下拉框，减少重复代码，后期维护更方便

存入数据库的说明 #

总金额已经展示在id="test4"的span元素中，当你需要提交到数据库时，可以通过以下方式获取值：

// 获取总金额
const totalAmount = document.getElementById("test4").innerText;
// 之后可以通过AJAX或者表单提交把这个值发送到后端存入数据库

内容的提问来源于stack exchange，提问作者Алексей Сергеевич