如何使用javascript内联计算选择表单值

Question

我有这个表单选择字段

<select class="form-control calculate" id="uweight" required>
  <option value="">Choose Any</option>
  <option value="1">1 day back</option>
  <option value="2">2 days back</option>
  <option value="3">3 days back</option>
</select>

我有第二个

<div class="form-group">
  <select class="form-control calculate" id="units" required>
    <option value="">Charge From</option>
    <option value="1">Wallet (<?= $price_c ?>/day )</option>
    <option value="2">members (<?= $es_d ?>/day)</option>
    <option value="3">Points (<?= $es_points ?> pts/day)</option>
  </select>
</div>

我有这个

<div class="col-xs-4 control-group form-group">
  <div class="controls">
    <label>Total:</label>
    <input type="text" class="form-control" id="total" readonly>
    <p class="help-block"></p>
  </div>
</div>
<div class="col-xs-12 control-group form-group" id="errmsg"></div>

我有这个 Javascript

$(document).ready(function() {
  //Calculate both inputs value on the fly
  $('.calculate').keyup(function() {
    var Tot = parseFloat($('#units').val()) + parseFloat($('#uweight').val());
    $('#total').val(Tot);
  });
  //Clear both inputs first time when user focus on each inputs and clear value 00
  $('.calculate').focus(function(event) {
    $(this).val("").unbind(event);
  });
  //Remove this it's just for example purpose
  $('.calculate').keypress(function(e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
      $("#errmsg").html("Digits Only").show().fadeOut("slow");
      return false;
    }
  });
});

我在这里尝试根据用户选择的内容进行内联计算。 Javascript 在表单输入上对我来说效果很好，但在表单选择上不起作用。请帮忙

Answer 1

如果您想在更改选择时执行计算，请考虑使用“更改”事件。 $('select.calculate').on('change', function () { ... })