如何将固定数值99.99添加到产品选择的汇总金额中？

下面提供几种可行的实现方案，基于你现有的代码逻辑优化：

方案一：在现有求和逻辑基础上直接追加99.99 #

现有代码已在input[name='class']中维护了选中产品的总金额，只需在每次更新产品总和后，计算包含99.99的最终金额并更新到classx容器中。

修改后的JS代码：

$(document).ready(function() {
  // 定义固定追加金额
  const FIXED_AMOUNT = 99.99;

  // 更新最终总金额的统一函数
  function updateTotal() {
    const productTotal = parseFloat($("input[name='class']").val()) || 0;
    const finalTotal = (productTotal + FIXED_AMOUNT).toFixed(2);
    $("#classx").text(`总金额（含€99.99）：€${finalTotal}`);
  }

  $('#btn-add').click(function() {
    $('#select-from option:selected').each(function() {
      $('#select-to').append(`<option value='${$(this).val()}'>${$(this).text()}</option>`);
      const currentTotal = parseFloat($("input[name='class']").val()) || 0;
      $("input[name='class']").val((currentTotal + parseFloat($(this).val())).toFixed(2));
    });
    // 添加后更新最终总金额
    updateTotal();
  });

  $('#btn-remove').click(function() {
    $('#select-to option:selected').each(function() {
      const removedValue = parseFloat($(this).val());
      $('#select-from').append(`<option value='${removedValue}'>${$(this).text()}</option>`);
      const currentTotal = parseFloat($("input[name='class']").val()) || 0;
      $("input[name='class']").val((currentTotal - removedValue).toFixed(2));
      $(this).remove();
    });
    // 删除后更新最终总金额
    updateTotal();
  });

  // 页面初始化时自动更新一次
  updateTotal();
});

说明：

• 提取updateTotal函数统一处理计算逻辑，避免代码重复
• 使用模板字符串替代字符串拼接，代码更简洁易读
• 增加数值校验，防止出现NaN异常
• 页面加载完成后自动初始化显示最终金额

方案二：直接从目标下拉框重新计算总和（更可靠） #

若担心中间变量input[name='class']的数值可能出现偏差，可每次操作后直接遍历右侧select-to的所有选项，重新计算产品总和再追加99.99。

JS代码：

$(document).ready(function() {
  const FIXED_AMOUNT = 99.99;

  function calculateFinalTotal() {
    let productTotal = 0;
    // 遍历右侧所有选项，累加产品金额
    $('#select-to option').each(function() {
      productTotal += parseFloat($(this).val()) || 0;
    });
    // 更新产品总和输入框
    $("input[name='class']").val(productTotal.toFixed(2));
    // 更新包含固定金额的最终总金额
    const finalTotal = (productTotal + FIXED_AMOUNT).toFixed(2);
    $("#classx").text(`总金额（含€99.99）：€${finalTotal}`);
  }

  $('#btn-add').click(function() {
    $('#select-from option:selected').each(function() {
      $('#select-to').append(`<option value='${$(this).val()}'>${$(this).text()}</option>`);
      $(this).remove(); // 移除左侧已选中选项，避免重复添加
    });
    calculateFinalTotal();
  });

  $('#btn-remove').click(function() {
    $('#select-to option:selected').each(function() {
      $('#select-from').append(`<option value='${$(this).val()}'>${$(this).text()}</option>`);
      $(this).remove();
    });
    calculateFinalTotal();
  });

  calculateFinalTotal();
});

说明：

• 每次操作后重新计算右侧所有选项的总和，确保数据一致性
• 移除左侧已选中选项，避免重复添加同一产品
• 逻辑直观，减少中间变量出错的概率

方案三：使用原生JavaScript实现（无jQuery依赖） #

如果不想依赖jQuery，可直接用原生JS重写逻辑，实现相同功能：

document.addEventListener('DOMContentLoaded', function() {
  const FIXED_AMOUNT = 99.99;
  const selectFrom = document.getElementById('select-from');
  const selectTo = document.getElementById('select-to');
  const btnAdd = document.getElementById('btn-add');
  const btnRemove = document.getElementById('btn-remove');
  const productTotalInput = document.querySelector("input[name='class']");
  const finalTotalDiv = document.getElementById('classx');

  function calculateFinalTotal() {
    let productTotal = 0;
    Array.from(selectTo.options).forEach(option => {
      productTotal += parseFloat(option.value) || 0;
    });
    productTotalInput.value = productTotal.toFixed(2);
    const finalTotal = (productTotal + FIXED_AMOUNT).toFixed(2);
    finalTotalDiv.textContent = `总金额（含€99.99）：€${finalTotal}`;
  }

  btnAdd.addEventListener('click', function() {
    const selectedOptions = Array.from(selectFrom.selectedOptions);
    selectedOptions.forEach(option => {
      const newOption = document.createElement('option');
      newOption.value = option.value;
      newOption.textContent = option.textContent;
      selectTo.appendChild(newOption);
      selectFrom.removeChild(option);
    });
    calculateFinalTotal();
  });

  btnRemove.addEventListener('click', function() {
    const selectedOptions = Array.from(selectTo.selectedOptions);
    selectedOptions.forEach(option => {
      const newOption = document.createElement('option');
      newOption.value = option.value;
      newOption.textContent = option.textContent;
      selectFrom.appendChild(newOption);
      selectTo.removeChild(option);
    });
    calculateFinalTotal();
  });

  calculateFinalTotal();
});

说明：

• 完全不依赖第三方库，兼容性更强
• 使用原生DOM API操作元素，性能更优

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