我正在尝试在我的代码中实现this question的答案,但我在重新计算时遇到了问题。
我有三个动态创建的<select>
下拉列表,其中包含从0到25的值。我已经给了这些.select-control
类,以便我可以更轻松地访问它们。每个代码如下:
<select name="amount_1" class="form-control select-control" required>
<option disabled selected value="">No. of Vouchers</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
其他两个<selects>
分别命名为amount_2
和amount_3
。
当其中一个值发生变化时,我需要重新计算所选选项的总和。这是我现在的(非工作)代码。任何正确方向的推动都将受到赞赏。
var total = 0;
$(".select-control").change(function() {
$(".select-control").each(function() {
total += parseInt(this.value);
});
alert(total);
});
警报仅用于测试目的。一旦工作,我只需使用总数更新<span>
元素。
这是jsFiddle。
编辑:在回答之后,这是一个有效的jsFiddle。
答案 0 :(得分:1)
这是因为您的其他选择选项没有完美的整数值。这些选择元素会导致parseInt(this.value)
为NAN。还要在变更事件中声明var total,因为它需要在更改select元素时重置:
$(".select-control").change(function() {
var total = 0;
$(".select-control").each(function() {
total += parseInt(this.value)||0;
});
alert(total);
});
<强> Working Demo 强>
答案 1 :(得分:0)
使用.val()
var total=0;
$(".select-control").change(function() {
$(".select-control").each(function() {
total += parseInt($(this).val());
});
alert(total);
});
答案 2 :(得分:0)
试试这个:
//bind change event for select box
$(".select-control").change(function() {
var total = parseInt($(this).val());
$(".select-control").not(this).each(function() {
if(parseInt($(this).val()))
{
total += parseInt($(this).val());
}
});
alert(total);
});
<强> Demo 强>
答案 3 :(得分:0)
试试这个
$(".select-control").change(function() {
var total = 0;
$(".select-control").each(function() {
var value = Number($(this).val());
total += value;
});
alert(total);
});