CODEWITHSUNDEEP
javascriptjquery
Hoàng Việt
Hoàng Việt

Reputation: 174

How to calculate sum value of dropdown menu in jquery

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>

Upvotes: 1

Views: 769

Answers (2)

Charlie
Charlie

Reputation: 23778

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

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 1

Related Questions