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);
    });
});