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

Answer 2

您应该制作这些data-属性，而不是class。

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

然后你可以做。

var offset = parseInt($(someSelector).data('offset'), 10);

Answer 3

您可以尝试这样的事情：

http://jsfiddle.net/Fft7G/

但在我看来，在课堂上定价是值得的。

Answer 4

这适用于 http://jsfiddle.net/Vw5Ms/5/

但男人，这太脏了

选择更改的jQuery数学

4 个答案: