javascript 多个select值求和

如图一所示，现有四个选项列表，每个选项里都有select,1,2,3,input选项。当选择input选项时，会出现一个可填写的文本框，如图二所示。最后想实现的效果是求和... 如图一所示，现有四个选项列表，每个选项里都有select,1,2,3,input选项。当选择input选项时，会出现一个可填写的文本框，如图二所示。最后想实现的效果是求和，结果直接显示在sum后，计算方法如图三所示，javascript应该怎么写？不能用jquery ，只能是javascript，急急急！谢谢html代码如下：<html><script type="text/javascript">function change(cnt) { val = document.getElementById("aa"+cnt).value; if (val == "0") { document.getElementById("bb"+cnt).style.display = ""; } else { document.getElementById("bb"+cnt).style.display = "none"; }}</script><body>100:<select name="aa1" id="aa1" onclick="change(1);"> <option value="">select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="0">input</option></select><input type="text" name="bb1" id="bb1" style="display:none;"><br /><br />200:<select name="aa2" id="aa2" onclick="change(2);"> <option value="">select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="0">input</option></select><input type="text" name="bb2" id="bb2" style="display:none;"><br /><br />300:<select name="aa3" id="aa3" onclick="change(3);"> <option value="">select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="0">input</option></select><input type="text" name="bb3" id="bb3" style="display:none;"><br /><br />400:<select name="aa4" id="aa4" onclick="change(4);"> <option value="">select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="0">input</option></select><input type="text" name="bb4" id="bb4" style="display:none;"><br /><br />SUM : 0</body></html> 展开





 我来答

3个回答

#合辑# 机票是越早买越便宜吗？

夜未央丶彬
2016-12-27 · TA获得超过211个赞

知道小有建树答主

回答量：145

采纳率：0%

帮助的人：116万

我也去答题访问个人页

关注

展开全部

<html>
    <script type="text/javascript">
        function change(cnt) {
            val = document.getElementById("aa" + cnt).value;
            if (val == "0") {
                document.getElementById("bb" + cnt).style.display = "";
            } else {
                document.getElementById("bb" + cnt).style.display = "none";
            }
        }


        window.onload = function() {
            var selects = document.getElementsByTagName("select");
            for (var idx = 0; idx < selects.length; idx++) {
                selects[idx].onchange = sum;
            }
            var inputs = document.getElementsByTagName("input");
            for (var idx = 0; idx < inputs.length; idx++) {
                inputs[idx].onkeyup = sum;
            }
        };

        function getValue(flag, rate) {
            var value = 0;
            var aa = document.getElementById("aa" + flag);
            var bb = document.getElementById("bb" + flag);
            if (aa.value != "" && aa.value == 0) {
                value = parseInt(bb.value || "0") * rate;
            } else {
                value = parseInt(aa.value || "0") * rate;
            }
            return value;
        }

        function sum() {
            var num = 0;
            for (var idx = 1; idx <= 4; idx++) {
                num = num + getValue(idx, idx * 100);
            }
            result.innerText = num;
        }
    </script>
    <body>
        100:
        <select name="aa1" id="aa1" onclick="change(1);">
            <option value="">select</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="0">input</option>
        </select>
        <input type="text" name="bb1" id="bb1" style="display:none;">
        <br />
        <br />
        200:
        <select name="aa2" id="aa2" onclick="change(2);">
            <option value="">select</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="0">input</option>
        </select>
        <input type="text" name="bb2" id="bb2" style="display:none;">
        <br />
        <br />
        300:
        <select name="aa3" id="aa3" onclick="change(3);">
            <option value="">select</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="0">input</option>
        </select>
        <input type="text" name="bb3" id="bb3" style="display:none;">
        <br />
        <br />
        400:
        <select name="aa4" id="aa4" onclick="change(4);">
            <option value="">select</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="0">input</option>
        </select>
        <input type="text" name="bb4" id="bb4" style="display:none;">
        <br />
        <br />
        SUM : <label id="result">0</label>
    </body>
</html>

可动态添加下拉个数，有几个就把循环几次就可以了，在原来的代码基础上只修改：

1．添加显示结果标签：<label id="result">0</label>

2．添加window.onload(绑定事件), getValue(获取每一组的值),sum（求和并显示）函数；

已赞过 已踩过<

评论收起

久就旧1O
2016-12-27 · TA获得超过1275个赞

知道小有建树答主

回答量：709

采纳率：75%

帮助的人：208万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
<script type="css/style">
select {
display: inline;
}
</script>
<script type="text/javascript">
function change(cnt) {
val = document.getElementById("aa"+cnt).value;
if (val == "0") {
document.getElementById("bb"+cnt).style.display = "inline";
} else {
document.getElementById("bb"+cnt).style.display = "none";
}
}
function sum() {
var num1 = document.getElementById("aa1").value;
var num2 = document.getElementById("aa2").value;
var num3 = document.getElementById("aa3").value;
var num4 = document.getElementById("aa4").value;
if (document.getElementById("aa1").value == "0")
{
num1 = parseInt(document.getElementById("bb1").value);
if (num1 == "")
{
num1 = 0;
}
} else {
num1 = num1 * 100;
}
if (document.getElementById("aa2").value == "0")
{
num2 = parseInt(document.getElementById("bb2").value);
} else {
num2 = num2 * 200;
if (num2 == "")
{
num2 = 0;
}
}
if (document.getElementById("aa3").value == "0")
{
num3 = parseInt(document.getElementById("bb3").value);
}else {
num3 = num3 * 300;
if (num3 == "")
{
num3 = 0;
}
}
if (document.getElementById("aa4").value == "0")
{
num4 = parseInt(document.getElementById("bb4").value);
} else {
num4 = num4 * 400;
if (num4 == "")
{
num4 = 0;
}
}
if (num1 == "" && num2 == "" && num3 == "" && num4 == "")
{
document.getElementById("theResult").innerHTML = 0;
} else {
var result =  num1 + num2 + num3 + num4;
document.getElementById("theResult").innerHTML = result;
}
}
</script>
<body>
100:
<select name="aa1" id="aa1" onclick="change(1);" onchange="sum()">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" value="0" name="bb1" id="bb1" style="display:none;" onchange="sum()">
<br /><br />
200:
<select name="aa2" id="aa2" onclick="change(2);" onchange="sum()">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" value="0" name="bb2" id="bb2" style="display:none;" onchange="sum()">
<br /><br />
300:
<select name="aa3" id="aa3" onclick="change(3);" onchange="sum()">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" value="0" name="bb3" id="bb3" style="display:none;" onchange="sum()">
<br /><br />
400:
<select name="aa4" id="aa4" onclick="change(4);" onchange="sum()">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" value="0" name="bb4" id="bb4" style="display:none;" onchange="sum()">
<br /><br />
SUM : <span id="theResult" >0</span>
</body>
</html>

追问

你的代码我测试过了，计算方法有点问题。选择1,2,3的时候没有问题，但选择input 直接输入数值时，结果并没有乘以前面的固定值，只是把输入的数值相加。

追答

嗯 知道的   我以为规则是自定义输入时，不需要乘以前面的100，200，300，400啊

本回答被网友采纳

已赞过 已踩过<

评论收起

情感微观
2016-12-27 · TA获得超过402个赞

知道小有建树答主

回答量：284

采纳率：0%

帮助的人：107万

我也去答题访问个人页

关注

展开全部


<html>
<script type="text/javascript">
	function bindChange( oObj )
	{
		if( oObj.value == '0')
		{
			oObj.nextElementSibling.style.display = 'inline';
		}else{
			oObj.nextElementSibling.style.display = 'none';
		}
	}
	function exec()
	{
		 var oSelect = document.getElementsByTagName('select');
		 var count = 0;
		 for( var i = 0 ; i < oSelect.length ; i++ )
		 {
			value = oSelect[i].options[oSelect[i].selectedIndex].value;
			if( value == '') {
				value = 0;
			} 
			if( value == '0' )
			{
				value = oSelect[i].nextElementSibling.value;
			}
			value = value ? parseInt( value ) : 0;
			
			count += (i+1)*100 * value;
		 }
		 document.getElementById('sum').innerHTML = 'SUM:'+count;
	}
    window.onload = function()
    {
        var oSelect = document.getElementsByTagName('select');
        for( var i = 0 ; i < oSelect.length ; i++ )
        {
            oSelect[i].onchange = function()
            {
				bindChange( this );
            };
        }
		var oButton = document.getElementsByTagName('button');
		oButton[0].onclick = function()
		{
			exec()
		};
	
    }
</script>
<body>
100:
<select>
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" style="display:none;">
<br /><br />
200:
<select>
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" style="display:none;">
<br /><br />
300:
<select>
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" style="display:none;">
<br /><br />
400:
<select>
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="0">input</option>
</select>
<input type="text" style="display:none;">
<br /><br />
<button>exec</button>
<span id='sum'>SUM : 0</span>

</body>
</html>

更多追问追答

追问

你的代码我测试过了，计算方法没问题，但为什么要多加一个按钮呢？不能实时显示计算结果。

追答

可以绑定input的change事件。可以如下修改：

window.onload = function()
    {
        var oSelect = document.getElementsByTagName('select');
        for( var i = 0 ; i < oSelect.length ; i++ )
        {
            oSelect[i].onchange = function()
            {
                bindChange( this );
                exec()
            };
        }
        var oInputText = document.getElementsByTagName('input');
        for( var i = 0 ; i < oInputText .length ; i++ )
        {
            oInputText [i].onchange = function()
            {
                exec()
            };
        }
    }

事件绑定的好处是，三层分离，各行其职，方便以后的页面维护。

如果你需要 500、600直接添加select就行了，不用修改Javascript。

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 多个select值求和

其他类似问题

为你推荐：