添加選擇輸入菜單的值

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)檢查是否已經選擇了一個值。如果你沒有這個，並且其中一個選項沒有價值，那麼當你計算sum和bsum時，你會得到NaN。

三，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/