Question

我正在尝试模拟单击输入框，然后在下拉菜单中选择任何选项后将其制表/单击的情况。

我在页面的下面有2个下拉列表，下面有一个数量框。然后有一个小计的价格。小计价格会根据所选的下拉选项自动计算。下拉菜单中的选项具有不同的价格，因此当输入数量时，将显示小计。但是，小计当前仅在输入数量后才重新计算，然后用户单击鼠标左键或在数量框旁边打标签。

我希望不必重新输入数量并每次单击/跳格。

我知道这是不对的，但是我必须首先开始。基本上类似于更改选择，然后模拟单击#qty框并单击/将其选中。

jQuery('select.product-custom-option').on('change', function(){
    jQuery('#qty').val().trigger('change');
});

这是我的示例HTML。因此，客户从下拉菜单中选择选项，然后输入数量，单击关闭/选项卡并更新价格...

当选择选项或“模拟”数量框后，如何更新价格？

<select name="options[517]" id="select_517" class="required product-custom-option"  data-selector="options[517]">
<option value="">-- Please Select --</option>
<option value="3137" price="1.50">Option 1</option>
<option value="3138" price="1.45">Option 2</option>
</select>

<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty">

<div class="price-box" id="subtotalprice-27107">
<span class="price-container">
<span id="subtotal-excluding-tax-product-price-27107" class="price-excluding-tax">
<span class="price">£15.91</span>
</span>
<span id="subtotal-including-tax-product-price-27107" data-label="Total Inc. VAT" class="price-including-tax" itemprop="price">
<span class="price">£19.09</span>
</span>
</span>
</div>

Answer 1

处理这种情况的方法是创建一个函数，例如，calculate（），该函数读取所有值，进行计算并显示输出。应该在可能导致计算发生变化的所有元素的更改/键入等上调用此函数。在这里使用有问题的html是如何工作的。

$(function() {
  //attach an handler to call 'calculate' on every element that effects the calculations
  $('#qty').on('change', calculate);
  $('#select_517').on('change', calculate);
});


function calculate() {

  //collect values from all elements that effects the calculation
  let opt = $('#select_517 option:selected').data('price');
  let qty = $('#qty').val();

  //do the calcuulations
  let subtotal = opt * qty;
  let total = subtotal + (subtotal * .10); //10% tax

  //display the output
  $('.price-excluding-tax .price').html('£' + subtotal);
  $('.price-including-tax .price').html('£' + total);
}

.price-box {
  margin-top: 10px;
}

.price-excluding-tax,
.price-including-tax {
  display: block;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="options[517]" id="select_517" class="required product-custom-option" data-selector="options[517]">
  <option value="">-- Please Select --</option>
  <option value="3137" data-price="1.50">Option 1</option>
  <option value="3138" data-price="1.45">Option 2</option>
</select>
<br>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty">

<div class="price-box" id="subtotalprice-27107">
  <span class="price-container">
<span id="subtotal-excluding-tax-product-price-27107" class="price-excluding-tax">SubTotal: 
<span class="price">£00.00</span>
  </span>
  <span id="subtotal-including-tax-product-price-27107" data-label="Total Inc. VAT" class="price-including-tax" itemprop="price">Total: 
<span class="price">£00.00</span>
  </span>
  </span>
</div>

Answer 2

我已经解决了我的问题，感谢您的关注

$('.product-custom-option').change(function () {
    $('input.qty').focus();
    $('input.qty').trigger('blur');
});

选择下拉选项时按jQuery选项卡键

2 个答案: