切换选项时扣除原选项值，仅累加新选项值的实现问题

这问题很典型，核心就是要解决「累加新值前先扣除旧值」的逻辑，现有代码的问题在于每次都直接在当前Span值上叠加新选项的值，导致数值不断累积。我给你两种实用的解决方案，你可以根据自己的场景选择：

方法一：基于初始基准值计算（最直接） #

如果你的Span初始值是固定的基准值（比如例子里的150），每次切换选项都希望Span值是「基准值 + 当前选中选项的数值」，那这种方法最简单：

// 页面加载时保存初始基准值
const baseValue = parseInt($('span').text());

// 监听Select的change事件
$('select').on('change', function() {
  // 获取当前选中选项的data-val（用jQuery的data方法自动转换为数字）
  const selectedVal = $(this).find('option:selected').data('val');
  // 计算并更新Span值
  $('span').text(baseValue + selectedVal);
});

// 可选：如果页面加载时需要自动应用默认选中选项的数值，取消下面注释
// $('span').text(baseValue + $('select option:selected').data('val'));

效果说明 #

• 初始Span值150，选中Item3（data-val=10）→ 150+10=160
• 切换到Item1（data-val=15）→ 150+15=165
• 完全匹配你期望的结果，逻辑清晰易懂。

方法二：跟踪上一次选中的数值（适合动态基准值场景） #

如果你的Span基准值可能在后续操作中被修改（比如其他功能改变了Span的值），那需要跟踪上一次选中的选项数值，切换时先扣除旧值再加上新值：

// 初始化：获取页面加载时默认选中选项的数值
let lastSelectedVal = $('select option:selected').data('val');

$('select').on('change', function() {
  // 获取当前Span的数值
  let currentSpanVal = parseInt($('span').text());
  // 获取当前选中选项的数值
  const currentVal = $(this).find('option:selected').data('val');
  
  // 计算新值：当前Span值 - 上一次选中值 + 当前选中值
  const newNumber = currentSpanVal - lastSelectedVal + currentVal;
  $('span').text(newNumber);
  
  // 更新上一次选中值，供下次切换使用
  lastSelectedVal = currentVal;
});

效果说明 #

• 假设初始Span值是150，默认选中Item1（15），如果页面加载时已经把15加上了（Span=165），切换到Item3时：165-15+10=160，再切换回Item1：160-10+15=165，完全符合需求。

小优化提示 #

使用jQuery的data('val')代替attr('data-val')会更方便，因为它会自动把data-val属性的字符串转换为数字类型，省去手动parseInt的步骤。

内容的提问来源于stack exchange，提问作者Jack The Baker