Question

I have a DropDown menu in an HTML form each with a specific value with them, What I need to do is add each of the values of the dropdown menus that the user selects and echo that total back to them, how do I do that?

For example I have this form

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

If a user selects say “Sock” and “Green” I need a script to add the two values together to equal 4 and echo that number to the user.

Answer 1

You can use javascript to get each select element. Then find the selected option and parse out its value. Finally add the sums.

http://jsfiddle.net/d9ntv/

javascript only solution

<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 solution. jQuery makes using javascript a lot easier. Although I would caution you to make sure you understand javascript before progressing to jQuery.

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

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