<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的面积会根据一个变量进行变化,例如说白色的与灰色的面积是不一样.
用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>
<script>
$("select").change(function() {
let shiji1s = $("#shiji1s").find("option:selected").val();
let shiji2s = $("#shiji2s").find("option:selected").val();
let shiji3s = $("#shiji3s").find("option:selected").val();
let shiji4s = $("#shiji4s").find("option:selected").val();
let sumSp = parseInt(shiji1s) * 1.1 + parseInt(shiji2s) * 1.2 + parseInt(shiji3s) * 1.35 + parseInt(shiji4s) * 2.1;
$("#sumSP").text(sumSp);
})
</script>
每个select控件都实现onChange方法，调用同一个计算面积的方法。