Javascript Jquery单独的多个选择选项在更改时更新价格

我有几个单独的产品有一个原始价格，每个都有一个选择下拉列表和相关的价格，原始价格会根据所选的选项进行更改，这是通过JQuery完成的

所以产品1=3.99，可选的插件（选择选项）小=1.50，中=3.50等等

<p><span data-name="product_name">Addon Product</span></p>
<p data-name="product_desc">Addon product descriptions</p>
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
<span class="price pull-left" itemprop="price" id="price">&pound;5.99</span>
<hr/>

<p><span data-name="product_name">2nd Product</span></p>
<p data-name="product_desc">2nd Addon product description</p>
 <label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="20" value="Medium">Medium</option>
<option data-price="30" value="Large">Large</option>
</select>
<span class="price pull-left" itemprop="price" id="price">&pound;3.99</span>
<hr/>

---

我处理了这个问题并解决了一些问题。你的HTML是

缺少一些结束标记

将第二个产品嵌入第一个产品组

通过将它们分成不同的组，然后使用jquery代码查找父组，然后按类搜索该组中的子组，我们能够获得您想要的功能

$(".readers").change(function() {
    // For each reader, need to go up to the form-groups parent to search for the price
  var productParent = $(this).parent().parent();
  // Need to get the base price from an attribute, otherwise it will change each time you make a selection
  var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
  productParent.find(".readers option:selected").each(function() {
    newPrice += +$(this).attr('data-price')
  });
  productParent.find(".price").html("£" + newPrice.toFixed(2));
});

---

您只能使用ID一次。为每个元素指定唯一的id。好的，有没有一种方法可以在不隐式指定的情况下使用jQuery动态引用id，因为它们将从db填充，并且将有n个编号？问题是，元素的id，每个元素的id应该是唯一的。在您的情况下，在这两种情况下，span元素id都是price。确保

元素具有唯一的id，并且

元素具有唯一的id。有几种方法可以做到这一点。可以进一步构造HTML（将每个产品块放入div或其他内容中），然后使用

.parent

、

.children

等遍历DOM，也可以使用

数据-

属性，或者使用连接，其中选择元素的id可能类似于产品id，然后价格范围的id类似于“price-1234”，然后将“price-”与产品id连接。有很多方法可以剥猫皮。

$(".readers").change(function() {
    // For each reader, need to go up to the form-groups parent to search for the price
  var productParent = $(this).parent().parent();
  // Need to get the base price from an attribute, otherwise it will change each time you make a selection
  var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
  productParent.find(".readers option:selected").each(function() {
    newPrice += +$(this).attr('data-price')
  });
  productParent.find(".price").html("£" + newPrice.toFixed(2));
});