HTML中的DropDown菜單幫助，添加值

Question

我在HTML窗體中有一個DropDown菜單，每個菜單都帶有一個特定的值，我需要做的是添加用戶選擇的每個下拉菜單的值並回顯總計回到他們，我該怎麼做？

例如，我有這種形式

<select name="value1" id="jumpMenu" onchange="this.form.submit();" action="table.php"> 
    <option value="1" selected="selected">Shoe</option> 
    <option value="2">Sock</option> 
    </select> 

    <select name="value2" id="jumpMenu" onchange="this.form.submit();"> 
    <option value="1" selected="selected">Red</option> 
    <option value="2">Green</option> 
    </select> 

如果用戶選擇說「襪子」和「綠色」我需要一個腳本來將兩個值加在一起等於4和回聲該號碼給用戶。

Answer 1

您可以使用JavaScript來獲取每個選擇元素。然後找到選定的選項並解析出它的值。最後加上總和。

http://jsfiddle.net/d9ntv/

JavaScript的唯一的解決方案

<script> 
    function alertTotal() { 
     var aSelect = document.getElementById('a'); 
     var bSelect = document.getElementById('b'); 
     var cSelect = document.getElementById('c'); 
     var aValue = aSelect.options[aSelect.selectedIndex].value; 
     var bValue = bSelect.options[bSelect.selectedIndex].value; 
     var cValue = cSelect.options[cSelect.selectedIndex].value; 

     alert(parseInt(aValue) + parseInt(bValue) + parseInt(cValue)); 
    } 
</script> 
<button onclick="alertTotal();">Show Total</button> 
<select id="a"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
</select> 
<select id="b"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
</select> 
<select id="c"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
</select> 

jQuery的溶液。 jQuery使得使用JavaScript更容易。儘管我會提醒你在進入jQuery之前確保你瞭解JavaScript。

http://jsfiddle.net/d9ntv/2/

$('button').click(function() { 
    var total = 0; 
    $('select').each(function() { 
     total += parseInt($(this).val()); 
    }); 
    alert('jQuery: ' + total); 
});