How to calculate sum value of dropdown menu in jquery

Question

I want to display the value of option each time changed and the total value all of them. Here's where I store these value.

The selected option's value display but the total value did not work out.

$(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>

Why a total of "un-selected" options? seems odd

Mark Schultheiss
– Mark Schultheiss

2017-12-26 06:12:43 +00:00
Commented Dec 26, 2017 at 6:12 — Mark Schultheiss
– Mark Schultheiss, Commented Dec 26, 2017 at 6:12

Milan Chheda · Accepted Answer · 2017-12-26 06:01:45Z

Added a function (getTotalValue) that is called to get the total value, which is the sum of each option.

$(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>

Charlie · Accepted Answer · 2017-12-26 06:05:20Z

1

You should select the options of the #Bank_Type123 and loop them through.

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

answered Dec 26, 2017 at 6:05

Charlie

24k12 gold badges65 silver badges97 bronze badges

Collectives™ on Stack Overflow

How to calculate sum value of dropdown menu in jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related