-3

<span class="amount">$39</span>ドロップダウン値が選択されたとき( ) に価格 div ( ) を自動的に更新する方法を<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>
4

1 に答える 1

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/

于 2013-08-16T01:50:43.880 に答える