如何计算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），该函数被调用以获取总值，这是每个选项的总和。

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

<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 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)
});