Question

我有两个不同的HTML元素，我想计算总和并在第三格中显示值。

我有一个带有3个选项值的选择框和一个具有固定值的div。我希望根据下拉菜单中选择的选项来计算总和。

我已经尝试研究并发现这一点。但是我的情况有所下降，总需求需要更改：JQuery Adding the values of 2 divs into a third div

这是下面的代码：

<select>
  <option value ="1100"> $1100 </option>
  <option value ="1200"> $1200 </option>
  <option value ="1300"> $1300 </option>
</select>

<div id="shipping">$4.99</div>

<div id ="total"></div>

我需要显示total div中的总金额，并随着下拉菜单中选项的更改而更改。

首先，默认总和为第一个值+ $4.99。我是jQuery的新手，所以无法正常工作。

Answer 1

您可以使用substr()从运输件中提取编号。然后将其添加到选定的值。请尝试以下方式：

$('select').change(function(){
  var s = $('#shipping').text().substr(1);
  $('#total').text('$'+(Number(s)+Number($(this).val())));
});
$('select').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value ="1100"> $1100 </option>
  <option value ="1200"> $1200 </option>
  <option value ="1300"> $1300 </option>
</select>

<div id="shipping">$4.99</div>

<div id ="total"></div>

Answer 2

以下是您可以使用的示例：

function select_changed(value) {
var shipping = parseInt(document.getElementById("shipping").innerHTML.substring(1));
  document.getElementById("total").innerHTML = '$' + (shipping + parseInt(value));
}

<select id="price" onchange="select_changed(value)">
<option value =""> </option>
<option value ="1100"> $1100 </option>
<option value ="1200"> $1200 </option>
<option value ="1300"> $1300 </option>
</select>

<div id="shipping">$4.99</div>

<div id ="total"></div>

让我知道是否有帮助

Answer 3

在不使用不必要第三方库的情况下使用Vanilla js怎么办？

function mySelection(selTag) {
  var selected = Number(selTag.options[selTag.selectedIndex].text.replace(/[^0-9.-]+/g,""));
  var default_val = Number(document.getElementById('shipping').innerHTML.replace(/[^0-9.-]+/g,""));
  var total = selected + default_val;
  document.getElementById('total').innerHTML = `$${total}`; 
}

<select  onchange="mySelection(this)">
<option value ="1100"> $1100 </option>
<option value ="1200"> $1200 </option>
<option value ="1300"> $1300 </option>
</select>

<div id="shipping">$4.99</div>

<div id ="total"></div>

计算两个不同HTML元素的总和，并使用Jquery / JavaScript

3 个答案: