2

いくつかの調査を行った後、jquery の数学のヘルプを求めています。

「option rel=」を使用して、製品の価格を示すテキストフィールドを変更したい

ここにhtmlコードを置きます：http://jsfiddle.net/YjLM7/

したがって、選択リストに次のように記載されている場合：

<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 €&lt;/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>

</p>

4

2 に答える 2

1

別のアプローチを提案します。アイテムの実際の価格をのdata-属性に入れ、選択されたものに応じてoption、それによって表示されるテキストを変更しますoption。ドロップダウンに複数のオプションがある場合、これにより柔軟性が向上します。

HTML：

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

JS：

$('.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);
    });
});

</ p>

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

于 2012-08-29T13:46:45.600 に答える
0

この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 €&lt;/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 + ' €');
})​

</p>

于 2012-08-29T13:34:15.303 に答える