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>

如果用户选择说“Sock”和“Green”，我需要一个脚本将两个值一起添加到4并将该数字回显给用户。

Answer 1

您可以使用javascript来获取每个select元素。然后找到所选选项并解析其值。最后加上总和。

http://jsfiddle.net/d9ntv/

javascript only解决方案

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

DropDown菜单帮助HTML，添加值

1 个答案: