JavaScript來更新產品總

-3

我有上午一種方法來自動更新價格DIV（<span class="amount">$39</span>）後什麼，我需要計劃在將來的版本，但我需要現在JavaScript來更新產品總

那麼價格將是$ 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>

來源

2013-08-16 Jess McKenzie

[你有什麼嘗試]（http://mattgemmell.com/2008/12/08/what-have-you-tried/）？ –

@JosephSilber我仍然不確定如何更新價格，因爲價格只是文本作爲選項有「數據價格」 –

你可以使用jQuery或者這應該只是js嗎？ – Saturnix

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-16 01:50:43

我剛剛查過你的小提琴，它並沒有考慮到39美元，所以它只顯示30美元時選擇它應該顯示$ 69 –

@JessMcKenzie - 沒有意識到你想要添加金額。我更新了我的答案以反映這一點。 –

那麼@JessMcKenzie小提琴是完美的工作，除非你清楚地告訴我們你在問什麼。但我認爲你必須研究69的價值，就像增加公式和價值更新一樣。你可以隨時在這裏找到幫助：http://api.jquery.com/ –

JavaScript來更新產品總

回答

相關問題