从html选择中选择的总和

时间:2018-01-26 16:24:36

标签: javascript select

尝试了几种方法,很多研究(也许我会错过一些但不能完成它)所以,我很想知道我是否可以将html select的选定值加起来

这是我的代码

<select id="m4r1InfoMrP" name="m4r1InfoMrP">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

另一个

<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

我的JS代码

<script type="text/javascript">
 var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
    m4r1InfoMrPValue = m4r1InfoMrP.value;

 var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
  m4r1InfoMrSValue = m4r1InfoMrS.value;

 var sum = 0;
 var a = m4r1InfoMrPValue;
 var b = m4r1InfoMrSValue;

 sum = a + b;
 document.getElementById("m4r1InfoMrPS").value = sum;
</script>

我正在寻找的是对所选值求和并在m4r1InfoMrPS上显示

提前致谢

2 个答案:

答案 0 :(得分:1)

您需要对select元素使用change事件。还需要转换为数字以便添加如下。希望这有帮助

&#13;
&#13;
var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
    m4r1InfoMrPValue = m4r1InfoMrP.value;
     var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
  m4r1InfoMrSValue = m4r1InfoMrS.value;
m4r1InfoMrP.onchange=()=>calculate();
m4r1InfoMrS.onchange=()=>calculate();

function calculate(){
m4r1InfoMrPValue = m4r1InfoMrP.value;
  m4r1InfoMrSValue = m4r1InfoMrS.value;

 var sum = 0;
 var a = +m4r1InfoMrPValue;
 var b = +m4r1InfoMrSValue;

 sum = a + b;
 document.getElementById("m4r1InfoMrPS").value = sum;
 }
 
  calculate()
&#13;
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

<input id="m4r1InfoMrPS"/>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要将String转换为Integer

看一下这个函数parseInt

var executeSum = function() {
  var m4r1InfoMrP = document.getElementById("m4r1InfoMrP"),
    m4r1InfoMrPValue = m4r1InfoMrP.value;

  var m4r1InfoMrS = document.getElementById("m4r1InfoMrS"),
    m4r1InfoMrSValue = m4r1InfoMrS.value;

  var sum = 0;
  var a = parseInt(m4r1InfoMrPValue);
  var b = parseInt(m4r1InfoMrSValue);

  sum = a + b;
  document.getElementById("m4r1InfoMrPS").value = sum;
};

executeSum();
<h3>Select a value to sum them</h3>
<input id="m4r1InfoMrPS" value="" readonly>
<hr>
<select id="m4r1InfoMrP" name="m4r1InfoMrP" onchange="executeSum()">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>
<hr>
<select id="m4r1InfoMrS" name="m4r1InfoMrS" onchange="executeSum()">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>