将下拉列表的总和添加到 txt 字段中[重复]答案

【问题标题】：Add sum of dropdowns into a txt field [duplicate]将下拉列表的总和添加到 txt 字段中[重复]
【发布时间】：2013-06-27 19:41:00
【问题描述】：

如何获取一组下拉菜单并将更改时的值添加到文本字段中？

<select name="qty[1]" id="qty[1]">
<option selected="selected">500</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>

<select name="qty[2]" id="qty[2]">
<option selected="selected">500</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>

<input type="text" name="total_qty" id="total_qty" />

所以如果我选择 1000，总 txtbox 将更改为 1000，然后如果我从另一个选择框中选择 2000，则总数应更改为 3000

【问题讨论】：

这个答案可能对你有帮助：stackoverflow.com/questions/17324013/…
将.change() 函数绑定到您的selects，并将option:selected 的值添加到另一个并设置input 值。

标签： javascript jquery forms drop-down-menu calculator

【解决方案1】：

使用这个：

var selects = $('select[name^=qty]');
selects.change(function(){
    var value = 0;
    selects.each(function(){ value += +this.value; });
    $('#total_qty').val(value);
}).trigger('change');

它适用于两个<select> 框或二十个而不更改代码。

它正在运行：http://jsfiddle.net/eYmF8/2/

【讨论】：

使用这个对吗？ <script src="http://code.jquery.com/jquery-2.0.2.min.js " type="text/javascript"></script>
@user2405912 - 是的，将其放在 </body> 标记之前，然后直接将我的答案中的代码放在 <script> PASTE MY CODE HERE </script> 中。
完美运行....由于某种原因，它无法在页面顶部运行！
@user2405912 - 它可能在页面准备好之前运行。只要你把它放在</body<> 标签之前，它就会按预期工作。很高兴它有帮助！

【解决方案2】：

Javascript：

var qty1 = document.getElementById("qty[1]");
var qty2 = document.getElementById("qty[2]");
var total_qty = document.getElementById("total_qty");
qty1.onchange = function() {
  var total = parseInt(qty1.value) + parseInt(qty2.value);
  total_qty.value = total;
}
qty2.onchange = function() {
  var total = parseInt(qty1.value) + parseInt(qty2.value);
  total_qty.value = total;
}

http://jsfiddle.net/SGY5E/

【讨论】：