Question

我以10美元（例如）销售产品。

当客户选择不同的尺寸/颜色时，必须动态重新计算最终价格。

每个值的价格必须在脚本中设置，例如数组。

<select name="size" id="size">
    <option>-- Please Select --</option>
    <option value="S">S (+$5.00)</option>
    <option value="S">M (+$10.00)</option>
    <option value="S">L (+$15.00)</option>
</select>

<select name="color" id="color">
    <option>-- Please Select --</option>
    <option value="Black">Black (+$5.00)</option>
    <option value="White">White (+$10.00)</option>
    <option value="Grey">Grey (+$15.00)</option>
</select>

<span id="total">$0.00</span>

<script type="text/javascript">
    var size = [];
    size['S'] = 5.00;
    size['M'] = 10.00;
    size['L'] = 15.00;

    var color = [];
    size['Black'] = 5.00;
    size['White'] = 10.00;
    size['Grey'] = 15.00;
</script>

是否有可能以及如何做到这一点？

Answer 1

我会做这样的事情

<select name="size" id="size">
    <option>-- Please Select --</option>
    <option value="S">S (+$5.00)</option>
    <option value="M">M (+$10.00)</option>
    <option value="L">L (+$15.00)</option>
</select>

<select name="color" id="color">
    <option>-- Please Select --</option>
    <option value="Black">Black (+$5.00)</option>
    <option value="White">White (+$10.00)</option>
    <option value="Grey">Grey (+$15.00)</option>
</select>

<span id="total">$0.00</span>
<script type="text/javascript>"
    $(function() {
        var size  = $('#size'),
            color = $('#color');

        var sizeobj = {
            'S' : 5.00,
            'M' : 10.00,
            'L' : 15.00
        }

        var colorobj = {
            'Black' : 5.00,
            'White' : 10.00,
            'Grey'  : 15.00
        }

        size.add(color).on('change', function() {
            var sizeprice  = parseFloat( sizeobj[size.val()] ),
                colorprice = parseFloat( colorobj[color.val()] );

            if (sizeprice > 0 && colorprice > 0 ) {
                $('#total').text('$' + ((sizeprice + colorprice).toFixed(2)));
            }
        });
    });
</script>

FIDDLE

使用数组和jQuery动态计算总价

1 个答案: