javascript - 如何使用 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);