ドロップダウンメニューのヘルプで値を追加する

Question

HTMLフォームのドロップダウンメニューにそれぞれ特定の値が設定されています。ユーザーが選択してエコーするドロップダウンメニューの各値を追加する必要があります彼らに戻って、私はどのようにそれを行うのですか？例えば

ユーザーは「靴下」と「緑」は、私は4と等しくし、ユーザーにその番号をエコーするために一緒に2つの値を追加するスクリプトが必要と言う選択した場合、私はこのフォーム

<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> 

を持っています。

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); 
});