Javascript：如何重新选择选择器并重新运行函数以给出新结果

我对Javascript不熟悉-抱歉，这是一个愚蠢的问题：

我有一张订单，上面列有产品的数量和价格

“产品”是一个选择下拉列表

一个表单上最多有35行这样的行。我得到的代码工作得很好，直到你回到你自己，想改变一个早期的“数量”或改变下拉列表中的“产品”

问题

1） 更改产品：我的代码无法识别已选择其他产品。产品id未更新。因此，全球var中持有的价格是错误的，成本是错误的

2） 更改数量：代码确认数量已更改，但仍会乘以全球价格中持有的价格

解决方案：如果我更改了数量，或者如果我在“选择”下拉列表中更改了产品（即产品id），那么我的代码需要重新运行并获得新的价格。我需要能够清除全局价格变量，并为乘法设置新的价格。如果是相同的产品，那么价格将是相同的-不管怎样

到目前为止，我得到的是：

var price = 0;

// first we grab the product id //
$(".product_id").on('change', function() {
  var value = parseFloat($(this).val()); // product_id
  console.log('prod_id', value);

  // then we use the product_id to grab the price using AJAX //
  $.ajax({
    type: 'GET',
    url: 'product_prices/' + value,
    success: function(data) {
      var data = JSON.parse(data);
      var result = data[0].price;
      price = Number(result).toFixed(2); // price
      console.log('price', price)

    }
  });
});


// We take the price and multiply by quantity to calculate the cost
$(".quantity").on('change', function() {


  var quantity = parseInt($(this).val());
  var num = (price * quantity);
  var cost = num.toFixed(2);

  $(this).parents(':eq(1)').find('input').filter(".cost").val(cost)
  console.log('cost', cost);
});

---

不要使用全局

price

变量，而是使用jQuery的方法在DOM中保存每行的价格

$(".product_id").on('change', function() {
  var value = parseFloat($(this).val()); // product_id
  console.log('prod_id', value);
  var row = $(this).closest("tr");
  // then we use the product_id to grab the price using AJAX //
  $.ajax({
    type: 'GET',
    url: 'product_prices/' + value,
    success: function(data) {
      var data = JSON.parse(data);
      var result = data[0].price;
      var price = Number(result).toFixed(2); // price
      console.log('price', price);
      row.data('price', price); // remember the row's current price
    }
  });
});


// We take the price and multiply by quantity to calculate the cost
$(".quantity").on('change', function() {
  var row = $(this).closest('tr');
  var price = row.data('price');
  if (price) {
      var quantity = parseInt($(this).val());
      var num = (price * quantity);
      var cost = num.toFixed(2);

      row.find("input.cost").val(cost)
      console.log('cost', cost);
  }
});

---

您的

price

变量是用户最后选择的任何产品的价格，它可能与用户正在更改的数量位于不同的行。您需要保存每行的价格，而不是单个全局变量。您是否尝试过

var value=parseFloat（$（此选项：selected）.text（））

@Barmar明白-但是，如果我可以获取新产品的id并重新运行ajax调用以给出新的价格，我就不需要保存每一行的价格。有什么建议我可以实现这一点吗？谢谢。当用户更改数量时，请使用DOM遍历函数，如

$（this）.closest（'tr'）.find（'product_id'）

，在同一行中查找产品。然后使用该值进行AJAX调用以获得价格。但是，每次用户更改数量时进行AJAX调用似乎过多。为什么不在进行产品AJAX调用时在DOM中保存价格呢？例如，

$（this）.recest（'tr'）.data（'price'，data[0].price）

。非常感谢您的帮助！