Javascript 如何使用jQuery从多个下拉框中获取总计?
我有很多不同值的下拉框。我不想把所有的箱子都算在一起 目前,我有一个计算一个方框总数的代码段,但当我选择另一个方框时,它将显示该方框的总数。我的程序可以有任意数量的下拉框,但它是随机的。下面是一个一次计算一个方框的代码段Javascript 如何使用jQuery从多个下拉框中获取总计?,javascript,jquery,html,ruby-on-rails,Javascript,Jquery,Html,Ruby On Rails,我有很多不同值的下拉框。我不想把所有的箱子都算在一起 目前,我有一个计算一个方框总数的代码段,但当我选择另一个方框时,它将显示该方框的总数。我的程序可以有任意数量的下拉框,但它是随机的。下面是一个一次计算一个方框的代码段 $('.drop').on('change',function() { var val = $(this).val(); var price = $(this).attr('data-cost-per-unit') var total = price *
$('.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="✓" /><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>
另一个
$5.55
0
1.
2.
3.
4.
5.
7.
8.
9
10
11
12
13
14
15
测试
$0.33
0
1.
2.
3.
4.
5.
7.
8.
9
10
11
12
13
14
15
jQuery专家可以帮我吗?首先使用
$('.drop')循环所有查询。每个…
并编译总计<代码>此内部每个
都是循环中的当前元素
//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);