Question

我有选择

的表格

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

如何根据所选选项在html h2中使用Javascipt更改金额？

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

当我开始表单时， 10美元的默认值 1美元，如果我将其更改为 20pc ，则应该 2美元

我找到了这样的代码，但它没有改变

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

以下是http://jsfiddle.net/wc6hrktv/

的示例

谢谢！

Answer 1

更改此行：

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

到此：

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

Answer 2

在select标记中设置每个选项的值属性

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

通过选择它来更新跨度值，就像在css中一样

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

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

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

2 个答案: