Question

我选择了下拉列值后，自动更新价格区（<span class="amount">$39</span>）（<option data-price="30.00" value="graphic-design-1">Graphic Design ($30)</option>）

以上两个选项值都是动态的，是一个woocommerce插件，我需要为将来的版本计划，但我现在需要它

价格将 $ 69

下拉列表的结构是：

<select class="addon addon-select" name="addon-artwork">

                <option value="">Select an option...</option>

                <option data-price="30.00" value="graphic-design-1" >Graphic Design (<span class="amount">&#36;30</span>)</option>
                <option data-price="0.00" value="artwork-provided-2" >Artwork provided</option>

</select>

Answer 1

var span = document.getElementsByClassName('amount')[0];
var select = document.getElementsByClassName('addon-select')[0];
var originalPrice = +span.textContent.substr(1);

select.addEventListener('change', function () {
    var price = +select.options[ select.selectedIndex ].getAttribute('data-price');
    span.textContent = '$' + (price + originalPrice);
}, false);

这是小提琴：http://jsfiddle.net/zgd8G/

如果您正在使用jQuery，可以将其缩短为：

var $span = $('.amount'),
    originalPrice = +$span.text().substr(1);

$('.addon-select').change(function () {
    var price = +$(this).find('option:selected').data('price');
    $span.text('$' + (price + originalPrice));
});

这是小提琴：http://jsfiddle.net/zgd8G/1/

javascript更新产品总数

1 个答案: