<table>
<tr align="center">
              <td>营养早餐</td>
              <td>7元</td>
              <td>
                 <label>
                  <select name="liebiao6" id="leibiao">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                  </select>
                </label>
              </td>
            </tr>
            <tr align="center">
              <td>压缩毛巾</td>
              <td>5元</td>
              <td>
                 <label>
                 <select name="liebiao7" id="leibiao">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                 </select>
                </label>
              </td>
            </tr>
            <tr align="center">
              <td>标准包</td>
              <td>防滑拖鞋1双<br />
                中华/黑妹/田七单人洗漱套装1套<br />
                打包袋1个<br />
              550ml瓶装水1瓶</td>
              <td>6元</td>
              <td>
                 <label>
                  <select name="liebiao8" id="leibiao">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                  </select>
                </label>
              </td>
            </tr>
            <tr align="center">
              <td>升级包</td>
              <td>高级棉拖鞋1双<br />
                7天旅行套装1套<br />
                营养早餐1份<br />
                打包袋1个<br />
              1500ml瓶装水1瓶</td>
              <td>20元</td>
              <td>
                 <label>
                  <select name="liebiao9" id="leibiao">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                  </select>
                </label>
              </td>
            </tr>
            <tr align="center">
              <td>全部合计</td>
              <td colspan="3">合计多少钱</td>
          </tr>
        </table>在一个jsp页面里,有几种商品,每种都是固定的,用户只是选择数量(这个用select标签写),如何在用户选择每个物品数量后在该JSP页面的下面显示选择的物品数量以及总价(物品价格已给出)

解决方案 »

  1.   

    IE 8下测试通过
    <html>
    <head><title>TEST PAGE</title></head>
    <body>
    <script type="text/javascript">
    function calTotal() {
        var total = 0;
        var tblData = document.getElementById("tblData");
        for (var i = 0; i<= tblData.rows.length - 2; i++) {
            var quantityCellIndex = ((i < 2) ? 2 : 3), unitPriceCellIndex = ((i < 2) ? 1 : 2);
            var dropDown = tblData.rows[i].cells[quantityCellIndex].getElementsByTagName("SELECT")[0];
            var quantity = dropDown.selectedIndex;
            if (quantity > 0) {
                var unitPrice = parseFloat(tblData.rows[i].cells[unitPriceCellIndex].innerHTML);
                total += unitPrice * quantity;
            }
        }    tblData = null;
        document.getElementById("tdTotal").innerHTML = total + "元";
    }
    </script>
    <table id="tblData">
    <tr align="center">
                  <td>营养早餐</td>
                  <td>7元</td>
                  <td>
                     <label>
                      <select name="liebiao6" id="leibiao" onchange="calTotal();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                      </select>
                    </label>
                  </td>
                </tr>
                <tr align="center">
                  <td>压缩毛巾</td>
                  <td>5元</td>
                  <td>
                     <label>
                     <select name="liebiao7" id="leibiao" onchange="calTotal();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                     </select>
                    </label>
                  </td>
                </tr>
                <tr align="center">
                  <td>标准包</td>
                  <td>防滑拖鞋1双<br />
                    中华/黑妹/田七单人洗漱套装1套<br />
                    打包袋1个<br />
                  550ml瓶装水1瓶</td>
                  <td>6元</td>
                  <td>
                     <label>
                      <select name="liebiao8" id="leibiao" onchange="calTotal();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                      </select>
                    </label>
                  </td>
                </tr>
                <tr align="center">
                  <td>升级包</td>
                  <td>高级棉拖鞋1双<br />
                    7天旅行套装1套<br />
                    营养早餐1份<br />
                    打包袋1个<br />
                  1500ml瓶装水1瓶</td>
                  <td>20元</td>
                  <td>
                     <label>
                      <select name="liebiao9" id="leibiao" onchange="calTotal();">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                      </select>
                    </label>
                  </td>
                </tr>
                <tr align="center">
                  <td>全部合计</td>
                  <td colspan="3" id="tdTotal">合计多少钱</td>
              </tr>
            </table>
    </body>
    </html>
      

  2.   

    onchange事件调用JS 函数再计算才对。
      

  3.   

    我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....