使用jQuery基于对象实现计算：下拉选择框值变更后结果不更新求助

嘿，我懂你现在的困扰——切换下拉选项时，计算结果一直停留在第一次选择的数值，对吧？这问题其实挺常见的，根源在于你的values对象只在代码首次执行时获取了一次下拉框的值，之后不管选项怎么变，都没去重新拿最新的数值，所以计算自然一直用旧数据啦。

核心问题分析 #

你原来的代码里，values = { adults : $('#adults').val(), ... }这行只在某个时刻（比如页面刚加载）执行了一次。当用户切换下拉选项时，这段代码不会自动重新运行，values里存的还是最初的选中值，后续计算当然不会跟着变化。

解决方案：封装计算逻辑+绑定change事件 #

我们只需要把「获取最新值→计算→更新页面」的流程封装成一个函数，然后让下拉框的change事件触发这个函数，同时页面初始化时也调用一次，就能解决问题了。

步骤1：封装计算函数

把获取值和计算的逻辑放进一个函数里，这样每次需要计算时都能重新获取最新的选中值：

function calculatePrice() {
  // 每次计算前都重新从下拉框拿最新值，还要转成数字避免字符串拼接错误
  const values = { 
    adults: parseInt($('#adults').val()), 
    children: parseInt($('#children').val()), 
    listPickup: parseInt($('#pickup').val()) 
  };

  // 计算各项价格
  const price = {
    base: values.adults * 6,
    child: values.children * 5,
    pickup: values.listPickup * values.adults,
    // 计算总价的方法
    total: function() {
      return this.base + this.child + this.pickup;
    }
  };

  // 把计算结果更新到页面上（这里假设你有个id为total-price的元素显示总价）
  $('#total-price').text(`总价：$${price.total()}`);
}

步骤2：绑定事件并初始化

在页面加载完成后，先执行一次计算函数得到初始值，然后给所有影响计算的下拉框绑定change事件，这样用户切换选项时就会自动重新计算：

$(document).ready(function() {
  // 页面加载完成后先算一次初始值
  calculatePrice();

  // 给三个下拉框绑定change事件，任何一个选项变化都触发计算
  $('#adults, #children, #pickup').on('change', calculatePrice);
});

关键注意点 #

• 一定要重新获取值：每次计算都要从DOM里拿最新的val()，不能复用之前的values对象。
• 转换数据类型：下拉框的val()返回的是字符串，要用parseInt或Number转成数字，不然会出现"2" + 6 = "26"这种字符串拼接的错误。
• 绑定所有相关下拉框：确保所有影响计算的下拉框都绑定了change事件，漏掉任何一个都可能导致计算不更新。

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