通过<；使用jquery更改价格；选项rel="&引用&燃气轮机；

在做了一些研究之后，我向您寻求一些jquery数学帮助

我想通过“option rel=”更改一个文本字段，该字段表示产品的价格

我把html代码放在这里：

因此，如果选择列表说明：

<option selected="selected" rel="price-" value="0">50 x 50 cm</option>

50 x 50厘米

显示标准价格

如果我将选择列表更改为：

<option rel="price-100" value="1">100 x 100 cm</option>

100x100厘米

价格应增加100（如果选择第一个选项，则返回-100）

谢谢你的帮助

以下是完整的代码：

<select>
<option selected="selected" rel="price-" value="0">50 x 50 cm</option>

<option rel="price-100" value="1">100 x 100 cm, Price add: €  100,00</option>
</select>

<p>Price</p>
<p><strong>200 €</strong></p>

<form method="post" action="catalog/category-1/product-1.html">
<input type="hidden" value="" name="productid">
<input type="submit" class="button" value="Add to cart" name="addcart">
</form>

50 x 50厘米
100 x 100厘米，价格加成：100,00欧元
价格

200欧元

​

这是JSFIDLE

<select>
   <option data-price="" selected="selected" value="0">50 x 50 cm</option>

   <option data-price="100" value="1">100 x 100 cm, Price add: €  100,00</option>
</select>

<p>Price</p>
<p><strong data-price="200">200 €</strong></p>

<form method="post" action="catalog/category-1/product-1.html">
      <input type="hidden" value="" name="productid">
      <input type="submit" class="button" value="Add to cart" name="addcart">
</form>
​
​

---

​

我建议另一种方法：将商品的实际价格放入

选项的
数据-
属性中，并根据所选内容更改该
选项所显示的文本。如果您的下拉列表有多个选项，这将使其具有更大的灵活性

HTML:


50 x 50厘米
100 x 100厘米
150 x 150厘米

JS:

$（'.item'）。每个（函数（i，sel）{
变量$sel=$（sel）；
$sel.find（'option'）。每个（函数（j，opt）{
变量$opt=$（opt），
optprice=$opt.data（'price'），
selprice=$sel.find（'option:selected'）。data（'price'），
diff=optprice-selprice，
diffaddsubtr=（diff>0）？“-add”：（diff<0）？“-subtract”：”，
diffamount=Math.abs（diff）| |“；
$opt.find（'.diffaddsubtr'）.text（diffaddsubtr.end（）
.find（“.diffamount”）.text（diffamount）；
});
});

​

您是否考虑过改用属性？jQuery使提取和使用这些数据变得非常容易。我们将对这些数据进行一些快速阅读–这将以何种方式简化jQuery math Blazemonger？谢谢！此外，您应该在这些属性中使用绝对价格，并动态计算差异。如果选择下拉列表有两个以上的选项，则当前方法将不起作用。注意：
rel
不是
option
元素上允许的属性。请使用
data-
属性，如
data price=“100”
。这对数学没什么帮助，但会让你的代码和HTML源代码更清晰有效。问题是，我来自一个集成到我的cms（modx）的电子商务解决方案。我可以说明一个价格，但创建选项字段–因此我必须找到一个解决方法。谢谢FAngel–如果我不能影响第一个选项的数据价格，这也会起作用吗？（这必须是空的）此外-我如何确定价格文本字段的目标？你能再次更新提琴吗？尽管我清理了缓存，但对我来说还是一样。这已经很好了-唯一的问题是：第二个价格不应该是“100”，而应该是“200+100”（回到第一个选项是“200-100”。第二个问题-有没有办法恢复“€”（除了用新的段落包装？）@JoeBaumgart那么是什么阻止了您在选择选项上输入正确的数据价格值？正如您所看到的，第二个选项为-100，200+（-100）为您提供200-100。$（“strong”）。文本（currPrice+price+“€”）我不得不说，这是一个非常巧妙的方法！如果我能用我的cms的电子商务插件完成这项工作，我将不得不尝试。感谢Blazemonger！正如我在下面所说的，不幸的是，这对我不起作用，因为选项1必须有数据价格=“100”和选项2：数据价格=“100”（这应该是将段落中的产品价格“200”改为“300”后的数学值）。
$("select").change(function(){
   var price = parseFloat($(this).find("option:selected").data("price"));
   if(isNaN(price))
       price = 0;
   var currPrice = parseFloat($("strong").data("price"));
   $("strong").text(currPrice + price + ' €');
})​

<select class="item">
    <option selected="selected" data-price="200">50 x 50 cm</option>
    <option data-price="300">100 x 100 cm</option>
    <option data-price="400">150 x 150 cm</option>
</select>

$('.item').each(function(i,sel) {
    var $sel = $(sel);
    $sel.find('option').each(function(j,opt) {
        var $opt = $(opt),
            optprice = $opt.data('price'),
            selprice = $sel.find('option:selected').data('price'),
            diff = optprice - selprice,
            diffaddsubtr = (diff > 0) ? "- add" : (diff < 0) ? "- subtract" : "",
            diffamount = Math.abs(diff) || "";
        $opt.find('.diffaddsubtr').text(diffaddsubtr).end()
            .find('.diffamount').text(diffamount);
    });
});