如何根据选定的选项Javascript更改html中的值

Question

I have form with select

<select class="form-control">
  <option>10 pc</option><!--1 USD -->
  <option>20 pc</option><!--2 USD -->
  <option>50 pc</option><!--3 USD -->
</select>

How can I using Javascipt change amount in html h2 depending on selected option?

<div class="text-center">
 <h2>Total amount<span style="color:#3972b2">1 USD</span></h2>
</div>

When I start form it should be 1 USD as default for 10pc's and if I change it to 20pc it should be 2 USD

I found such code but it doesn't change

$('select[class="form-control"]').on('change',function(){
    var get=$('select option:selected').text();
    $('#new_text').val(get);
});

Here is example on http://jsfiddle.net/wc6hrktv/

Thank you!

Answer 1

Change this line:

$('#new_text').val(get);

to this:

$('#new_text').html(get);

Answer 2

set value property of each option in your select tag

<select class="form-control">
  <option value="1">10 pc</option><!--1 USD -->
  <option value="2">20 pc</option><!--2 USD -->
  <option value="3">50 pc</option><!--3 USD -->
</select>

update value of span by selecting it just like you do in css

$('select[class="form-control"]').on('change',function(){
    var get=$('select option:selected').val();

   $('.text-center h2 span').html(get+" USD");
});