如何计算jquery中下拉菜单的总和值

Question

我希望每次更改时显示选项的值以及所有这些值的总值。这是我存储这些值的地方。

显示所选选项的值，但总值无效。

$(document).ready(function() {
  var money_span = $("#amount_of_money");
  var total_money_span = $("#amount_money_total");
  $('#Bank_Type123').change(function(event) {
    event.preventDefault();
    money_span.text($(this).val());

    $('#Bank_Type123').each(function(event) {
      event.preventDefault();
      var total_price = 0;
      total_price += $(this).val();
      total_money_span.text(total_price)
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="viet">
  <h5>Bank Type:</h5>
  <select id="Bank_Type123" class="form-control">
           <option value="" disabled selected style="display:none;">Choose A Bank</option>
           <option name="Mizuho" value="10000">Mizuho</option>
           <option name="UFJ" value="20000" >UFJ</option>
           <option name="Yucho" value="30000" >Yucho</option>
     </select>
</div>

<div id="divCheckbox">
  <div class="input-group px-1 py-1">
    <span class="input-group-addon">Wallet</span>
    <span id="amount_of_money" class="input-group-addon unique"></span>
    <span class="input-group-addon">JPY</span>
  </div>
  <div class="input-group px-1 py-1">
    <span class="input-group-addon">Total:</span>
    <span id="amount_money_total" class="input-group-addon"></span>
    <span class="input-group-addon">JPY</span>
  </div>
</div>

Answer 1

添加了一个函数（getTotalValue），调用该函数来获取总值，即每个选项的总和。

decorators.py

$(document).ready(function() {
  var money_span = $("#amount_of_money");
  var total_money_span = $("#amount_money_total");
  $('#Bank_Type123').change(function(event) {
    event.preventDefault();
    money_span.text($(this).val());
    getTotalValue();
  });
});

function getTotalValue() {
  var total_price = 0;
  $('#Bank_Type123 option').each(function() {
    if (parseInt($(this).val()) > 0) {
      total_price += parseInt($(this).val());
      $("#amount_money_total").text(total_price);
    }
  });
}

Answer 2

您应该选择#Bank_Type123的选项并循环它们。

$('#Bank_Type123 option').each(function(event) {
      event.preventDefault();
      var total_price = 0;
      total_price += $(this).val();
      total_money_span.text(total_price)
});