Question

我有<select>个产品，当选择了一个选项后，input #price会自动填充data-price，然后在输入中输入数量{{1最后在输入#quantity中的结果来自#sum。如何在改变输入时选择并选择？

＆＃13;

price*quantity

＆＃13;

$('#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();
});

＆＃13;

Answer 1

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

$('#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="">

Answer 2

要捕获quantity的值，您可以使用blur方法。当用户从输入框中删除焦点时，将调用blur函数并计算总和。

此外，您可以创建模块displaySum方法以获取price和quantity输入的值并更新sum输入。

$('#product').change(function(){
    var price = parseInt($(this).children("option:selected").attr("data-price"));
    $("#price").attr("value",price);
    displaySum();
});

$('#quantity').on('blur', function(e) {
    displaySum();
});

function displaySum() {
  let price = parseInt($('#price').val());
  let quantity = parseInt($('#quantity').val());
  if(isNaN(price)) { price = 0; }
  if(isNaN(quantity)) { quantity = 0; }
  let sum = price * quantity;
  $('#sum').val(sum)
}

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

Answer 3

if ($("#quantity").val() > 0)
{
    $("#sum").val(parseInt(quantity, 10) * parseInt($("#price").val(),10) );
}

添加以下行。它会将数量乘以价格并将其设置为总和输入。

$('#product').change(function(){
    var price = parseInt($(this).children("option:selected").attr("data-price"));
    $("#price").attr("value",price);
    $("#quantity").trigger("input"); //this line will update any reflections to the change in product.
});

$('#quantity').on('input propertychange paste change', function(e) {
    var quantity = $('#quantity').val();
    if ($("#quantity").val() > 0)
    {
        $("#sum").val(parseInt(quantity, 10) * parseInt($("#price").val(),10) );
    }
});

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

自动填充计算表格

3 个答案: