chivasm2
2021-09-08 22:21
采纳率: 100%
浏览 89
已结题

jquey对多个select下拉框数值进行求和


                    <td style="width: 6%"><select class="form-control" id="shiji1s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                    <td style="width: 6%"><select class="form-control" id="shiji2s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                    <td style="width: 6%"><select class="form-control" id="shiji3s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                    <td style="width: 6%"><select class="form-control" id="shiji1r"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                    <td style="width: 5%" id="sumSP">这里输出总和</td>

需求:
以上是自动计算布料面积的html代码片段,shiji1s/shiji2s/shiji3s/shiji1r是4块不同面积的布料(面积分别是每块1.1平方米/1.2平方米/1.35平方米/2.1平方米),当选择了下拉框的数值后实时计算出总面积如何做?

补充一下:shiji1s/shiji2s/shiji3s/shiji1r的面积会根据一个变量进行变化,例如说白色的与灰色的面积是不一样.

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • 最佳回答

    用onchange事件
    你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    </head>
    <body>
    
        <table>
            <tr>
                
                        <td style="width: 6%"><select class="form-control" id="shiji1s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                        <td style="width: 6%"><select class="form-control" id="shiji2s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                        <td style="width: 6%"><select class="form-control" id="shiji3s"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                        <td style="width: 6%"><select class="form-control" id="shiji1r"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option></select></td>
                        <td style="width: 5%" id="sumSP">这里输出总和</td>
            </tr>
        </table>
    
    <script type="text/javascript">
    
    var sel = document.querySelectorAll("select.form-control");
    var gy = [1.1, 1.2, 1.35, 2.1]
    function selectsum() {
        var sum = 0;
        for (var i = 0; i < sel.length; i++) {
            var n = sel[i].options[sel[i].selectedIndex].text;
            sum += parseFloat(n) * gy[i];
        }
        document.getElementById("sumSP").innerHTML = sum.toFixed(2);
    }
    
    for (var i = 0; i < sel.length; i++) {
        sel[i].onchange = selectsum;
    }
    selectsum();
    </script>
    </body>
    </html>
    
    
    评论
    解决 1 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题