在选定下拉列表的两个值之间计算？

Question

如何从两个选定的下拉列表中计算值并显示在文本框中？而且我想计算汽车不买点击按钮..HTML代码保险：<select class="form-control" name="insurance" onchange="calcVals()" id="insurance">   <option disabled="" selected="" ></option>   <option value="200">Yes</option>   <option value="0">No </option></select>人手：<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">   <option disabled="" selected=""></option>   <option value="150">1</option>   <option value="300">2</option>   <option value="450">3</option>   <option value="600">4</option>   <option value="750">5</option></select>文本框 ：<input name="totalAmount" id="totalAmount" type="text"  readonly>javascript:    function calcVals() {    var e = document.getElementById("manpower");    var selFrst = e.options[e.selectedIndex].text;    var f = document.getElementById("insurance");    var selScnd = f.options[f.selectedIndex].text;    var totalCal = selFrst + selScnd;    document.getElementById("totalAmount").value = totalCal; }

Answer 1

首先，添加id="insurance"到保险选择

其次，如果要添加值，则需要该值

function calcVals() {

  var e = document.getElementById("manpower");

  var f = document.getElementById("insurance");

  var selFrst = e.options[e.selectedIndex].value;

  var selScnd = f.options[f.selectedIndex].value;

  var totalCal = +selFrst + +selScnd;

  document.getElementById("totalAmount").value = totalCal;

}

<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">

  <option disabled="" selected=""></option>

  <option value="200">Yes</option>

  <option value="0">No </option>

</select>

Manpower:

<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">

  <option disabled="" selected=""></option>

  <option value="150">1</option>

  <option value="300">2</option>

  <option value="450">3</option>

  <option value="600">4</option>

  <option value="750">5</option>

</select>

Textbox :

<input name="totalAmount" id="totalAmount" type="text" readonly>

Answer 2

尝试在下面你缺少一些东西，我们必须使用 parseInt 将字符串转换为整数。

function calcVals() {

    var e = document.getElementById("manpower");

    var selFrst = e.options[e.selectedIndex].value;

    var f = document.getElementById("insurance");

    var selScnd = f.options[f.selectedIndex].value;

    var totalCal = parseInt(selFrst) + parseInt(selScnd);

    document.getElementById("totalAmount").value = totalCal;

 }

<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">

   <option disabled="" selected="" ></option>

   <option value="200">Yes</option>

   <option value="0">No </option>

</select>

<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">

   <option disabled="" selected=""></option>

   <option value="150">1</option>

   <option value="300">2</option>

   <option value="450">3</option>

   <option value="600">4</option>

   <option value="750">5</option>

</select>

<input name="totalAmount" id="totalAmount" type="text"  readonly>

Answer 3

没有 ID“保险”的选择器，因此您必须使用“getElementsByName”而不是 getElementsById。

请尝试以下代码：

 <select class="form-control" name="insurance" id="insurance" onchange="calcVals()">

  <option disabled="" selected=""></option>

  <option value="200">Yes</option>

  <option value="0">No </option>

</select>

Manpower:

<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">

  <option disabled="" selected=""></option>

  <option value="150">1</option>

  <option value="300">2</option>

  <option value="450">3</option>

  <option value="600">4</option>

  <option value="750">5</option>

</select>

Textbox :

<input name="totalAmount" id="totalAmount" type="text" readonly>

<script>

function calcVals() {

    var e = document.getElementById("manpower");

    var selFrst = e[0].value;

    var f = document.getElementsByName("insurance");

    var selScnd = f[0].value;

    var totalCal = parseInt(selFrst) + parseInt(selScnd);

    document.getElementById("totalAmount").value = totalCal;

 }

</script>