根据 select 个选项更新价格

Question

我在表格中有多个 select 选项，每个选项都附有 data-price 价格。当任何选项更改或被 selected 时，我需要根据所有 select 离子更新价格。我尝试了以下方法：

html:

<h3>Size</h3>

<select class="form-control calculate" id="size" name="size">
    <option data-price="5.00" value="Small">Small</option>
    <option data-price="10.00" value="Medium">Medium</option>
    <option data-price="15.00" value="Large">Large</option>
</select>
<br />

<h3>Packing</h3>

<select class="form-control calculate" id="packaging" name="packaging">
    <option data-price="0" value="Standard">Standard</option>
    <option data-price="20.00" value="Shrink">Upgraded</option>
</select>
<br />  

<h4>PRICE</h4>

<span id="item-price">12.99</span>

jquery:

var basePrice = 12.99;

$(".calculate").change(function() {
    newPrice = basePrice;
    $(".calculate option:selected").each(function() {
        newPrice += $(this).data('price')
    });
    $("#item-price").html(newPrice);
});

我正在使用 jQuery 1.11.2，它像字符串输出一样连接每个选项：

12.9910.0020.00

但我需要将它们作为一个数字加在一起并给我一个值。

如果我使用 jQuery 1.7.2，它会给我正确的值：

42.99 (12.99 + 10.00 + 20.00)

我该怎么做？我必须坚持使用 jQuery 1.11，因为我的一些其他脚本依赖于此版本或更高版本

Answer 1

您要将字符串（应该是数字但不是）添加到数字，将字符串类型转换为数字，然后使用 .toFixed(2) 使其成为货币。

(Demo)

var basePrice = 12.99;
$(".calculate").change(function () {
    newPrice = basePrice;
    $(".calculate option:selected").each(function () {
        newPrice += Number($(this).data('price'));
    });
    $("#item-price").html(newPrice.toFixed(2));
});

原版中的相同脚本 javascript，不需要 jQuery

(Demo)

var basePrice = 12.99;
var itemPrice = document.getElementById('item-price');
(function () {
    "use strict";
    var selects = document.getElementsByClassName('calculate'), select;
    for (var i = 0; select = selects[i]; i++) {
        select.addEventListener('change',function (){
            var newPrice = basePrice;
            var selectedItems = document.querySelectorAll('.calculate option:checked'), selected;
            for(var x = 0; selected = selectedItems[x]; x++) {
                newPrice += Number(selected.getAttribute('data-price'));
            }
            itemPrice.innerHTML = newPrice.toFixed(2);
        },false);
    }
})();

Answer 2

.data() 应该智能地将值解释为数字；出于某种原因，它不会用你的十进制数来做。（你的 jsFiddle 确认它在 jQuery 1.10.1 和 2.1.3 中工作正常，这很奇怪。）你可以通过使用 parseFloat() 将字符串转换为数字来强制它这样做，但是你必须在末尾使用 toFixed(2) 来补偿常见的浮点运算错误。

var basePrice = 12.99;
$(".calculate").change(function () {
    newPrice = basePrice;
    $(".calculate option:selected").each(function () {
        newPrice += parseFloat($(this).data('price'));
    });
    $("#item-price").html(newPrice.toFixed(2));
});

http://jsfiddle.net/gfch55bk/

一个更简单的解决方案可能是使用整数而不是小数。但是，您仍然需要在末尾使用 .toFixed(2) 对总和进行四舍五入：

<h3>Size</h3>
<select class="form-control calculate" id="size" name="size">
    <option data-price="5" value="Small">Small</option>
    <option data-price="10" value="Medium">Medium</option>
    <option data-price="15" value="Large">Large</option>
</select>
<br />
<h3>Packing</h3>
<select class="form-control calculate" id="packaging" name="packaging">
    <option data-price="0" value="Standard">Standard</option>
    <option data-price="20" value="Shrink">Upgraded</option>
</select>
<br />
<h4>PRICE</h4>
<span id="item-price">12.99</span>

JS:

var basePrice = 12.99;
$(".calculate").change(function() {
    newPrice = basePrice;
    $(".calculate option:selected").each(function() {
        newPrice += $(this).data('price')
    });
    $("#item-price").html(newPrice.toFixed(2));
});

http://jsfiddle.net/8tb465g6/

根据 select 个选项更新价格

Update price based on select options

jquery

html-select