javascript to update product total -

i have after way automatically update price div (<span class="amount">$39</span> ) when dropdown value selected (<option data-price="30.00" value="graphic-design-1">graphic design ($30)</option>)

both of above option values dynamic , woocommerce plugin requiring planned future releases need

the price $69

the structure of dropdown is:

<select class="addon addon-select" name="addon-artwork">                  <option value="">select 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>  

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); 

here's fiddle: http://jsfiddle.net/zgd8g/

---

if you're using jquery, can shorten this:

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

here's fiddle: http://jsfiddle.net/zgd8g/1/