Question

在完成一些研究之后，我会找你一些jquery数学帮助。

我想通过“option rel =”更改一个说明产品价格的文本字段

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

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

显示标准价格。

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

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

价格应该增加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>

Answer 1

我建议采用不同的方法：将项目的实际价格放在data-的{{1}}属性中，并根据所选内容更改option显示的文字。如果您的下拉列表有多个选项，这将使自己更具灵活性。

HTML：

option

JS：

<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>

http://jsfiddle.net/mblase75/YjLM7/5/

Answer 2

See这个jsfiddle。

<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>

和JS：

$("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 + ' €');
})

通过<option rel =“”> </option>使用jquery更改价格

2 个答案: