输入折扣码后切换Select选项时新价格未生效的技术问题

云原生阿岚

2026-7-24

问题原因与解决方案：切换Select选项后价格回滚至初始值

核心问题

问题出在jQuery data()方法的内部缓存机制：

首次调用$(element).data('value')时，jQuery会将DOM元素的data-value属性值存入内部缓存
后续调用data('value')时，jQuery直接返回缓存值，不会重新读取DOM上的data-value属性
你在AJAX成功后用attr('data-value', ...)更新了DOM属性，但change事件仍通过data('value')取值，导致拿到的始终是初始加载时的旧价格

解决方案（二选一即可）

方案1：更新DOM属性的同时同步jQuery缓存

修改AJAX成功回调中更新Select选项的代码，使用data()方法替代attr()，确保缓存与DOM属性同步：

var selectOptions = $('.form-quantity-select-' + product + ' option');
selectOptions.each(function() {
  var option = $(this);
  var value = option.val();
  if (value == 'pack') {
    option.data('value', new_price_pack); // 同步更新jQuery缓存
  } else if (value == 'single') {
    option.data('value', new_price_single);
  }
});

方案2：直接读取DOM属性，绕过jQuery缓存

修改Select的change事件处理代码，直接读取DOM的data-value属性（注意转成数字类型）：

$('.form-quantity-select').change(function() {
  var selectedOption = $(this).val();
  // 直接读取DOM属性，而非依赖jQuery缓存
  var selectedValue = parseFloat($(this).find('option:selected').attr('data-value'));
  console.log(selectedValue);
  var product = $(this).data('productid');
  var formattedPrice = selectedValue.toLocaleString('sr-RS');
  $('.total-price-' + product + ' span').text(formattedPrice);
});