javascript - 自动填写的计算表

我有一个带有产品的<select>，当选择一个选项时，input #price将自动填充data-price，然后在输入#quantity中输入数量，最后在输入#sum中得到结果来自price*quantity。如何在改变输入和选择时求和？

$('#product').change(function() {
  var price = parseInt($(this).children("option:selected").attr("data-price"));
  $("#price").attr("value", price);
});

$('#quantity').on('input propertychange paste change', function(e) {
  var quantity = $('#quantity').val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="product">
      <option value="1" data-price="100">Product 1</option>
      <option value="2" data-price="200">Product 2</option>
      <option value="3" data-price="300">Product 3</option>
    </select>
<input type="text" id="price" value="" readonly>
<input type="number" id="quantity" min="1" max="9999999" step="1">
<input type="text" id="sum" readonly="">

最佳答案

添加一个附加的“计算总数”功能，并从两个事件处理程序中调用它。无论何时更改总数，总数都会更新。

$('#product').change(function() {
  var price = parseInt($(this).children("option:selected").data("price"));
  $("#price").val(price);
  calcTotal();
});

$('#quantity').on('input propertychange paste change', function(e) {
  calcTotal();
});

function calcTotal() {
  var price = $('#price').val() || 0;
  var qty = $('#quantity').val() || 0;
  var total = price * qty;

  $('#sum').val(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="product">
  <option value="1" data-price="100">Product 1</option>
  <option value="2" data-price="200">Product 2</option>
  <option value="3" data-price="300">Product 3</option>
</select>
<input type="text" id="price" value="" readonly>
<input type="number" id="quantity" min="1" max="9999999" step="1">
<input type="text" id="sum" readonly="">

关于javascript - 自动填写的计算表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45696934/