我正在制作一个简单的表格来计算地毯等的价格，我有2个范围输入字段，其可调滑块从0到100，还有一个带有不同价格的下拉选项的选择标签，我想做的计算是（range1 + range2）* selectoption，然后将总计放入文本字段中，总计全部无需单击提交，因此它为您提供实时计算，而无需提交页面，有关如何实现此操作的任何想法？
<html>
<head>
<link rel="stylesheet" type="text/css" href="form_style.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type="text/javascript">
object.onchange=function output(){
var value1 = document.getElementById("width").value;
var value2 = document.getElementById("length").value;
document.getElementById('total').innerHTML = parseInt(width) + parseInt(length);
}
</script>
</head>
<body>
<div id="form11">
<h1>Form</h1>
<form method="post" action="#">
<table id="table11">
<tr><td><p>Width (m):</p></td><td><input type="range" name="width" id="value1" value="0" min="0" max="100" data-highlight="true" onchange="calc"></td></tr>
<tr><td><p>Length (m):</p></td><td><input type="range" name="length" id="value2" value="0" min="0" max="100" data-highlight="true" onchange="calc"></td></tr>
<tr><td><p>Carpet Type:</p></td><td><select name="carpettype">
<option value="6.99">Carpet1</option>
<option value="4.99">Carpet2</option>
<option value="8.99">Carpet3</option>
<option value="3.99">Carpet4</option>
<option value="5.99">Carpet5</option>
</select></td></tr>
<tr><td><p>Total:</p></td><td><input type="text" id="total" name="total"/></td></tr>
<tr><td colspan="2"><input type="submit" value="Submit"/></td></tr>
</table>
</form>
</div>
</body>
最佳答案
就像您在使用jQuery：
请参见working jsfiddle。
关于javascript - 如何将两个范围值相加，然后乘以选择标记？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24633178/