Question

如何使用jquery onchange函数更新输入字段以使其保持运行总量？

e.g。我有以下下拉列表选项：

<select name="select" id="set1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="select" id="set2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<input type="text" name="total" id="total" value="" />

当用户从上面的两个下拉列表中选择一个选项时，我需要在输入字段中显示两个选定选项的总和。每次选择不同的选项时，都需要动态更改。你怎么能用jquery实现这个目标？

Answer 1

您可以执行以下操作：

$('#set1, #set2').on('change', function (e) {
  var first = $('#set1').val();
  var second = $('#set2').val();
  $('#total').val( parseInt(first) + parseInt(second) );
});

这是你想要的吗？ JSFiddle（演示）

Answer 2

$('[name=select]').change(function () {
    $('#total').val(Number($('#set1').val()) + Number($('#set2').val()));
});

这会从#set1和#set2获取当前选定的值，将它们转换为数字，然后设置#total元素的值。

要将字符串转换为数字，您可以像我一样使用Number()方法，以提高可读性。你也可以做$('#set1').val() - 0，这是不可理解的，但速度要快得多。要查看将字符串转换为数字及其性能的所有方法的比较，请查看：http://jsperf.com/convert-string-to-number-techniques/2

Answer 3

适用于任何数量的＆＃39;选择＆＃39; ：

＆＃13;

$select = $('select.numberSelect');

$select.on('change', function(){
  
  var total = 0;
  
  $select.each(function(e){
    total += parseInt($(this).val()); // or parseInt(e.currentTarget.value)
  })
  
  $('#total').val(total);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<select class='numberSelect'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<input type="text" id="total" value="3" />

＆＃13;

修改：删除了许多无用的东西（名称，ID，值=＆＃34;＆＃34;，...）并添加了第三个选择以用于演示目的。

编辑2：添加了一个类来定位特定的＆＃39;选择＆＃39;元素，而不是DOM中的其他元素。

Answer 4

使用你的HTML。如果你有一个动态的选择，可以改进它。

http://jsfiddle.net/591uag9h/

$(document).on("change","#set1,#set2", function() {
    var sum = parseInt($("#set1").val()) + parseInt($("#set2").val());
    $("#total").val(sum);
});

如何使用jquery onchange更新输入字段？

4 个答案: