jQuery无法正确计算下拉选择的单位值：KG正常GR不生效

已定位的核心问题 #

• HTML结构合规性问题
  • 同页面重复定义相同id：Suger、Tea、Flour三行的单位下拉框均使用id="option"，违反HTML同一页面id必须唯一的规范，jQuery选择$("#option")时仅会匹配页面第一个id为option的元素，其余两行的下拉框完全无法被选中。
  • 单位下拉框命名不统一：Rice、Dhall行的单位下拉框分别使用id="status"、id="Dhallstatus"，完全不在原有选择器的匹配范围内，这两行的单位选择永远无法触发计算逻辑。
• JavaScript逻辑链路bug
  • 存在无效冗余代码：脚本中尝试读取不存在的#Sugerstatus元素值，且该值未参与任何计算逻辑，属于早期开发残留代码。
  • 元素查找作用域错误：原有计算逻辑全局遍历所有#option元素，而非当前选中商品所在行的对应下拉框，跨行取值会导致计算完全错位。
  • 计算结果未接入累加链路：就算GR的换算值临时算出，也没有被赋值给用于总金额累加的tot变量，后续累加逻辑仍使用未做单位换算的固定单价乘数量的结果，直接把临时算出的GR值覆盖掉。
  • 总金额写入顺序错误：遍历下拉框时每匹配到一个选项就直接给总金额输入框赋值，循环走完时最后一次写入的结果会覆盖前面所有临时计算值，GR的计算结果自然无法保留。

可落地的修正方案 #

• 统一HTML选择器规范：删除所有单位下拉框上重复的id，给每一行的单位下拉框加公共类名unit-select，不再用id定位这类多行复用的元素。
• 锁定当前行作用域：在循环遍历选中商品时，先通过$(this).closest("tr")锁定当前选中项所在的表格行，所有数量、单位的取值都从当前行内部查找，彻底避免跨行取数的问题。
• 理顺计算赋值链路：
  1. 从当前行拿到数量值、单位选中值，统一转成数字类型，避免字符串类型的比较错误
  2. 根据选中单位计算真实行小计：选KG（值为2）时按公斤单价计算；选GR（值为1）时将克重换算为公斤后计算
  3. 将换算后的真实小计赋值给tot变量，再纳入总金额累加逻辑，保证GR、KG的计算结果都能正常写入表格和总金额输入框。

原有代码失效的本质：全局选择器取到的永远是第一行的下拉框，就算第一行选了GR，临时算出的换算值也会被后续未做单位换算的累加结果覆盖，用户视角看到的就是KG计算正常、GR算完没反应。

修正后的核心代码示例 #

var tot = 0;
var total = 0;

function Add() {
    $("input[name='pos']:checked").each(function() {
        // 锁定当前选中商品所在的表格行
        const $currentRow = $(this).closest("tr");
        let check = $(this).val();
        let rowSubTotal = 0;

        // 商品单价映射表，可后续拓展为全局配置
        const itemPriceMap = {
            "Suger": 12,
            "Village Fries": 15,
            "Fries": 35,
            "Tea": 10,
            "Coffee": 32,
            "Apple Juice": 25,
            "Orange Juice": 45
        };

        // 从当前行取数量，转数字，空值默认0
        const qty = Number($currentRow.find('[name="qty"]').val() || 0);
        // 从当前行取单位值，转数字
        const unitVal = Number($currentRow.find('.unit-select').val() || 0);

        // 按单位计算真实行小计
        if (unitVal === 2) { // KG单位计算逻辑
            rowSubTotal = qty * 140;
        } else if (unitVal === 1) { // GR单位计算逻辑，做克转公斤换算
            rowSubTotal = (qty / 1000) * 140;
        }

        tot = rowSubTotal;
        total += tot;

        // 追加商品行到明细表的逻辑保持原有写法不变
        const tableRow = `<tr>
            <td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete</td>
            <td>${check}</td>
            <td>${itemPriceMap[check] || 0}</td>
            <td>${qty}</td>
            <td>${tot}</td>
        </tr>`;

        $("#tbl-item tbody").append(tableRow);
        $('#total').val(total.toFixed(2)); // 保留两位小数优化展示
    });
}

// 原有行删除、重置功能逻辑保持不变
function deleterow(e) {
    const total_cost = Number($(e).parent().parent().find('td:last').text());
    total -= total_cost;
    $('#total').val(total.toFixed(2));
    $(e).parent().parent().remove();
}

$('#reset').click(function() {
    location.reload();
});

内容的提问来源于stack exchange，提问作者abin visa