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

あなたは＃1 Bank_Type123とループそれらを通じのオプションを選択する必要があります。

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