我想获得所有选定选项的总计，并将答案四舍五入到小数点后一位。注意我不使用 JQuery 提前致谢
<!DOCTYPE html>
<html>
<head lang="en">
<title>Testing Code</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="item1" name="item1">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select id="item2" name="item2">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="item3" name="item3">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>Total:</td>
<td>Caculated Total here in 1 decimal place</td>
</tr>
</tbody>
</table>
</body>
</html>最佳答案
附加更改事件处理程序并计算每次更改的总和和更新。
// get all select elements within table
// and convert it into array
// for older browser use [].slice.call(...
var s = Array.from(document.querySelectorAll('#item1,#item2,#item3'));
// iterate over elements
s.forEach(function(ele) {
// bind change event handler to the element
ele.addEventListener('change', function() {
// get td to be updated and calculate sum by using reduce method
document.querySelector('#total').textContent = s.reduce(function(sum, e) {
return sum + Number(e.value);
// set initial value as 0
}, 0).toFixed(1); // limit to one decimal place
})
})
// get all select elements within table
// and convert it into array
// for older browser use [].slice.call(...
var s = Array.from(document.querySelectorAll('#item1,#item2,#item3'));
// iterate over elements
s.forEach(function(ele) {
// bind change event handler to the element
ele.addEventListener('change', function() {
// get td to be updated and calculate sum by using reduce method
document.querySelector('#total').textContent = s.reduce(function(sum, e) {
return sum + Number(e.value);
// set initial value as 0
}, 0).toFixed(1); // limit to one decimal place
})
})<!DOCTYPE html>
<html>
<head lang="en">
<title>Testing Code</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="item1" name="item1">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>
<select id="item2" name="item2">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>
<select id="item3" name="item3">
<option value=""></option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.25">25%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
</select>
</td>
</tr>
<tr>
<td>Total:</td>
<td id="total">0</td>
</tr>
</tbody>
</table>
</body>
</html>关于javascript - 使用 javascript 计算多个选择选项的总计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40874663/