Question

我想自动计算表中列出的费用总和。随着选择菜单的改变。所以我编码：

$(function() {
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html($(cost) * 1.07);//calculate vat from $cost
  var vat=$('#vat').val();
  //select
  $('select').on('change','#trn', function() {
    var optionSelected = $(this).find("option:selected");
    var trn = optionSelected.val();
        $('#total').html($(cost).val+$('vat').val+$('trn').val());

  })
});

但是该脚本无法正常工作。控制台中无故显示错误。

小提琴：https://jsfiddle.net/nobuts/bwpc8tfh/13/

Answer 1

希望对您有帮助

$("document").ready(function(){
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html(parseInt(cost) * 1.07);//calculate vat from $cost  
  $('#trn').change( function() {
      var optionSelected = $(this).val();
      var vat=$('#vat').html();
      var tot=parseInt(cost)+parseInt(optionSelected)+parseInt(vat);
      $('#total').html(tot);    
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-boredered">
  <tr>
    <th>Cost</th>
    <th><span id="cost" data-val="1000">1,000</span></th>
  </tr>
  <tr>
    <td>VAT</td>
    <td><span id="vat"></span></td>
  </tr>
  <tr>
    <td>Deliver</td>
    <td>
      <select id="trn">
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Total</td>
    <td><span id="total">xxx</span></td>
  </tr>
</table>

Answer 2

经常（并非总是）当您在控制台中没有出现错误时，这可能意味着您的jquery选择器没有找到您希望它找到的元素。

使用事件委托时，第二个参数选择子元素，例如：

$(document).on("change", "select" ...

在这种情况下，您的代码：

$('select').on('change','#trn',

试图找到#tr作为所有select的子-它不是孩子，而是选择项。更改为：

$("#tr").on('change', function() ...

或

$(document).on('change', '#trn', function() ...

修复该问题后，您需要进行更改

$('#total').html($(cost).val+$('vat').val+$('trn').val());

到

$('#total').text(cost+$('#vat').text()*1+$('#trn').val()*1);

（{#vat是一个跨度，因此使用.text()来获取值而缺少#）

更新的小提琴：https://jsfiddle.net/28xdf63g/

Answer 3

$(function() {
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html(cost * 1.07);//calculate vat from $cost
  var vat=$('#vat').val();
  //select

  $("#trn").change(function () {

    var optionSelectedVal = $(this).val();
    console.log(optionSelectedVal);
    var trn = optionSelectedVal;
        $('#total').html(parseInt(cost)+parseInt($('#vat').html())+parseInt(optionSelectedVal));
  console.log(parseInt(cost)+parseInt($('#vat').html())+parseInt(optionSelectedVal));
 })   

});

fiddle

在选择更改时使用jQuery自动计算表单

3 个答案: