选择更改的jQuery数学

Question

所以使用jQuery我能够弄清楚如何通过选择下拉来改变跨越变化的跨度中的HTML值,但它有点hacky.这是代码:http://jsfiddle.net/flinx777/ZMjun/

目前,我从所选的选项中抓取该类,并用类值替换span中的文本.相反,我更喜欢定义范围HTML(在此定义产品的价格),当有人从选择中选择时,它会从价格中添加或减去.所以例如我试图像这样选择HTML:

<select id="price_change" name="buckle options">
<option value="" class="">Please select</option>
<option value="Stainless steel" class="">Stainless Steel</option>
<option value="Titanium" class="+20">Titanium</option>
<option value="No Buckle" class="-10">No Buckle</option>
</select>

这样我就可以在选择选项中的类中定义要么在产品价格中增加要么减去(在跨度中),而不是当前的方式我必须在选择中手动进行数学运算.我现在在做.

谢谢!

Answer 1

你可以使用属性"value"

<select id="price_change" name="buckle options">
    <option value="135" >Please select</option>
    <option value="135" >Stainless Steel</option>
    <option value="155" >Titanium</option>
    <option value="125" >No Buckle</option>
</select>

将您建议的代码更改为:

$(document).ready(function(){
    //Changes the price on the page if a selection is made with a price modifier
    $("#price_change").change(function() {
        var price = $(this).children("option:selected").val();
        $(".product_price").html(price);
    });
});