如何使用jQuery從多個下拉框中獲取總數？

Question

我有一個動態數量的不同值的下拉框。我不能計算所有盒子中的所有總數。

目前，我有一個代碼片段可以計算一個盒子的總數，但是當我選擇另一個盒子時，它將顯示該盒子的總數。我的程序可以有任意數量的下拉框，但是它是隨機的。繼承人，在一個時間來計算一個盒子片段

$('.drop').on('change',function() { 
    var val = $(this).val(); 
    var price = $(this).attr('data-cost-per-unit') 
    var total = price * val 
    $("div.total-amount").text("$"+total); 
    }); 

我的形式呈現這個樣子的

  <form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div> 
        <li class='bullet-item'> 
         <div class='product panel'> 
         <div class='small-12'> 
          <h4> 
          <li class="product" id="product_2" value="2"><div class='row'> 
           <div class='small-2 columns switch'> 
           <input id='switchName0' type='checkbox'> 
           <label for='switchName0'></label> 
           </div> 
           <div class='small-7 columns'> 
           <input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" /> 
           another 
           <br> 
           <div class='subheader'>$5.55</div> 
           </div> 
           <div class='small-3 columns'> 
           <select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><option value="0">0</option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
           <option value="7">7</option> 
           <option value="8">8</option> 
           <option value="9">9</option> 
           <option value="10">10</option> 
           <option value="11">11</option> 
           <option value="12">12</option> 
           <option value="13">13</option> 
           <option value="14">14</option> 
           <option value="15">15</option></select> 
           </div> 
          </div> 
          </li> 
          </h4> 
         </div> 
         </div> 
        </li> 
        <li class='bullet-item'> 
         <div class='product panel'> 
         <div class='small-12'> 
          <h4> 
          <li class="product" id="product_1" value="1"><div class='row'> 
           <div class='small-2 columns switch'> 
           <input id='switchName1' type='checkbox'> 
           <label for='switchName1'></label> 
           </div> 
           <div class='small-7 columns'> 
           <input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" /> 
           test 
           <br> 
           <div class='subheader'>$0.33</div> 
           </div> 
           <div class='small-3 columns'> 
           <select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><option value="0">0</option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
           <option value="7">7</option> 
           <option value="8">8</option> 
           <option value="9">9</option> 
           <option value="10">10</option> 
           <option value="11">11</option> 
           <option value="12">12</option> 
           <option value="13">13</option> 
           <option value="14">14</option> 
           <option value="15">15</option></select> 
           </div> 
          </div> 
          </li> 
          </h4> 
         </div> 
         </div> 
        </li> 

一個jQuery高手可以幫我在這裏？

Answer 1

//cache your selectors 
var drop = $('.drop'); 
//your grand total variable 
var grandtotal = 0; 
//create a function to call to reuse for all drops 
function getTotal(){ 
    //cycle through each one 
    drop.each(function(i,el){ 
     //i is the number and el is the element (or this) 
     var val = $(this).val(); 
     var price = $(this).attr('data-cost-per-unit') 
     var total = price * val 
     grandtotal = grandtotal + total; 
    }); 
    $("div.total-amount").text("$"+grandtotal); 
} 
//bind on change to all drops 
drop.on('change',getTotal);