Question

我很难搞清楚这一个。我可以使用一些帮助，因为我对JavaScript知之甚少。

我正在尝试使用多个选择菜单并实时添加所选项目的值并从固定数字中减去。

<form>
<section id="extra-features">
<select name="450_1" id="450_1" class="form-control" onchange="updateTotals()" >
<option selected="selected"></option>
<option value="larry,13">larry</option>
<option value="dex,12">dex</option>
<option value="ryder,18">ryder</option>
</select>
<select name="450_2" id="450_2" class="form-control" onchange="updateTotals()">
<option selected="selected"></option>
<option value="bob,4">bob</option>
<option value="jim,6">jim</option>
<option value="stew,7">stew</option>
</select>
</section>   
</form>
<p id="total"></p>
<p id="balance"></p>

这是我的javascript

function updateTotals() {
var inputs = document.getElementById('extra-features').getElementsByTagName('select');

var sum = 0;
var bsum = 2000000;
for (var i = 0, num = inputs.length; i < num; i++) {
    if (inputs[i].change) {
        sum += parseInt(inputs[i].getAttribute('value').split(",")[1]);
        bsum -= parseInt(inputs[i].getAttribute('value').split(",")[1]);
    }
}

document.getElementById('total').innerHTML = sum;
document.getElementById('balance').innerHTML = bsum;
}

var section = document.getElementById('extra-features');
var inputs = section.getElementsByTagName('select');

for (var i = 0, num = inputs.length; i < num; i++) {
inputs[i].addEventListener('change', updateTotals);
}

这是我的小提琴JSFiddle

Answer 1

你遇到了一些问题：

首先，您不需要两次添加更改侦听器（在HTML中，然后在JavaScript中）。

其次，inputs[i].change未定义，因此您的sum和bsum永远不会被更改。我不确定那是想要完成什么，但这是不必要的。而不是它，我放if(inputs[i].value)来检查是否已经选择了一个值。如果您没有这个，并且其中一个选项没有价值，那么当您计算NaN和sum时，您将获得bsum。

第三，getAttribute('value')返回null。您可以使用.value获取价值。

function updateTotals() {
    var inputs = document.getElementById('extra-features').getElementsByTagName('select');

    var sum = 0;
    var bsum = 2000000;
    for (var i = 0, num = inputs.length; i < num; i++) {
        if(inputs[i].value) {
            sum += parseInt(inputs[i].value.split(",")[1]);
            bsum -= parseInt(inputs[i].value.split(",")[1]);
        }
    }

    document.getElementById('total').innerHTML = sum;
    document.getElementById('balance').innerHTML = bsum;
}

这是一个工作小提琴：http://jsfiddle.net/k1mkdsx6/

添加选择输入菜单的值

1 个答案: