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的面积会根据一个变量进行变化,例如说白色的与灰色的面积是不一样.

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

CSDN专家-天际的海浪 2021-09-08 22:25

关注

用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条)

报告相同问题？

关注问题

jquey对多个select下拉框数值进行求和 jquery 有问必答
2021-09-08 22:21

回答 2 已采纳用onchange事件你题目的解答代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮） <!doctype html> <html lang="en">
select下拉框两个数据进行联动 elementui
2022-01-10 16:38

回答 3 已采纳第一个设置@change事件第二个对应在@change事件中变更 v-model绑定的值
jquery取消选择select下拉框 jquery
2017-01-13 06:35

回答 5 已采纳选中value为0的option ``` $('#selectId').val('0') ```
获取多个下拉框选中的值并计算和
2019-01-07 18:14

大大大大熊先生的博客这几个月的项目都涉及到多选操作，整理了一下，防止以后再遇到找不到demo。第一个项目是获取商品的属性值，因为每个商品的属性都不同，包括属性名和属性值都是后台遍历获得的。我就直接多选遍历返回数据了。 ...
select下拉框从数据库获取值 ajax javascript layui
2022-03-06 11:13

回答 1 已采纳看网络那一栏，看请求有没有响应。有就是dom操作问题。没有就是接口问题。
element的select下拉框过多折叠显示 elementui 前端
2022-05-12 13:14

回答 2 已采纳 //一行 .minSty{ height:44px; min-height:44px; max-height:44px; transition: all 0.4s linear; }
jquery 回显下拉框的值 javascript jquery 前端
2022-07-04 22:02

回答 2 已采纳问题主要是bootstrap框架把select 元素替换了,页面上显示的不是select 元素了要用bootstrap框架自己的设置下拉框的方法 $("#uesInsLevel").selectpic
vue实现多个下拉去重
2018-11-08 16:48

伊泽瑞尔灬的博客 vue实现多个下拉去重
html中select下拉框中option样式能更改吗？ css3 html 前端
2021-12-06 11:22

回答 3 已采纳可以的 .el-select-dropdown__item:hover { color: red; font-size: 30px; }
点击图片，展开select下拉框的方法 css html5 javascript
2020-12-11 09:15

回答 12 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name
如何使用JQuery获取多个下拉框值 jquery php
2013-11-18 10:47

回答 4 已采纳 You can do this: var data = $('select[name="travel[]"]').map(function () { return $(this).val
前端学习笔记
2021-12-26 10:15

As_Xx_Ls的博客注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！使用H5 Canvas API进行绘图： var ctx = c2.getContext('2d'); //绘制矩形 ctx.fillStyle = '#000' 填充颜色/渐变色对象 ctx.strokeStyle = '#000' ...
select下拉框在浏览器运行的时候为什么会多一个空值？ html5
2018-10-11 02:47

回答 5 已采纳 content1要初始化过，要不就是undefined。如果ng-model名称不是content1，记得修改下面的代码，初始化为你其中任意一个option的valu值 ```
前端非框架类知识点汇总
2021-07-26 22:52

南川直树的博客 initial-scale 用于设置页面初次显示时的缩放比例 maximum-scale 用于设置页面最大的缩放比例 user-scalable 用于设置是否允许用户对页面进行缩放 width:12px; 宽度 height:12px; 高度字体属性 font-family:"宋体";...
js前端常用工具类封装（如日期时间，字符串处理等）及常用css样式的封装
2022-02-16 11:21

甜十一的博客 1.js常用工具类 /** * js常用工具类 */ /** * 方法作用：【格式化时间】 * 使用方法 * 示例： ... * var now = new Date();... * var nowStr = now.dateFormat("yyyy-MM-dd hh:mm:ss");... * new Date().dat
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 9月16日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 9月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
修改了问题 9月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 9月8日

悬赏问题

¥15 uniapp实现如下图的图表功能
¥15 u-subsection如何修改相邻两个节点样式
¥30 vs2010开发 WFP（windows filtering platform）
¥15 服务端控制goose报文控制块的发布问题
¥15 学习指导与未来导向啊
¥15 求多普勒频移瞬时表达式
¥15 如果要做一个老年人平板有哪些需求
¥15 k8s生产配置推荐配置及部署方案
¥15 matlab提取运动物体的坐标
¥15 人大金仓下载，有人知道怎么解决吗

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

2条回答 默认 最新

问题事件

悬赏问题

2条回答默认最新