javascript中多个选择选项的总计

Question

我想对所有选定的选项求和，并将答案四舍五入到小数点后一位。 注意我不使用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> 

Answer 1

附加更改事件处理程序并计算总和，并在每次更改时进行更新。

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