如何避免相同data-rate的运费重复添加至订单总额？

你的代码每次切换城市时，直接将当前运费追加到订单总额中，未扣除之前已添加的运费，导致即便选择同费率城市，总额也会重复累加。以下是两种可行的解决方法：

方案一：保存基础订单总额（推荐） #

先获取并存储不含运费的原始订单总额，每次切换城市时，用原始总额加上当前运费计算最终总额，确保总额始终是基础金额加当前运费，避免重复累加。

修改后的JavaScript代码：

// 页面加载时保存不含运费的基础订单总额
const baseTotal = parseFloat(jQuery('#total').html());
const baseOrderTotal = parseFloat(jQuery('#ordertotal').html());

jQuery('#city').change(function() {
  const currentRate = parseFloat(jQuery(this).find(':selected').data('rate'));

  // 更新显示的运费金额
  jQuery('#shipping').html(currentRate);

  // 计算新总额：基础金额 + 当前运费
  const newTotal = baseTotal + currentRate;
  const newOrderTotal = baseOrderTotal + currentRate;

  // 更新页面显示与表单隐藏域值
  jQuery('#total').html(newTotal);
  jQuery('#ordertotal').html(newOrderTotal);
  jQuery('#orderField').val(newOrderTotal);
  jQuery('#shippingRate').val(currentRate);
});

方案二：记录上一次运费，切换时先减后加 #

若无法提前获取基础总额，可通过记录上一次的运费值，每次切换时先从总额中减去上一次运费，再加上当前运费，实现运费的替换而非累加。

修改后的JavaScript代码：

let lastRate = 0; // 初始化上一次运费为0

jQuery('#city').change(function() {
  const currentRate = parseFloat(jQuery(this).find(':selected').data('rate'));

  // 更新显示的运费金额
  jQuery('#shipping').html(currentRate);

  // 获取当前总额并转为数字
  let currentTotal = parseFloat(jQuery('#total').html());
  let currentOrderTotal = parseFloat(jQuery('#ordertotal').html());

  // 替换运费：减去上一次运费，加上当前运费
  currentTotal = currentTotal - lastRate + currentRate;
  currentOrderTotal = currentOrderTotal - lastRate + currentRate;

  // 更新页面显示与表单隐藏域值
  jQuery('#total').html(currentTotal);
  jQuery('#ordertotal').html(currentOrderTotal);
  jQuery('#orderField').val(currentOrderTotal);
  jQuery('#shippingRate').val(currentRate);

  // 更新上一次运费记录，供下次计算使用
  lastRate = currentRate;
});

注意：你当前引用的jQuery版本为1.2.3，属于非常老旧的版本，建议升级至3.x系列稳定版，避免潜在的兼容性问题。

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