Question

我想得到所有选定选项的总数，并将答案四舍五入到小数点后一位。注意我不使用JQuery 提前致谢

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript选择多个选项

1 个答案: