Question

我正在使用这个jquery计算插件：http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

我正在使用总和示例。

在我的版本中，我正在动态地将值插入字段并重新计算，并且一切正常，但到目前为止，我刚刚将新值插入到空字段中。

现在在单独的操作中，我希望增加之前由某个值填充的字段之一的值，然后重新计算。

我设置了一个小提琴我想要做的事情。

http://jsfiddle.net/rEQnY/1/

有一个选项下拉列表。每个选项都有一个数值。

现在作为示例，我们可以随机选择一个字段。让我们说第3个字段的数字为“1”。

当我选择其中一个下拉值时，我希望第3个字段中的数字1增加那么多，然后总和框也应该增加那么多。

在javascript中，我开始听下拉框中的更改，但是我在那里插入了什么？

也许我可以像这样抓住所选的值：

$('#numbers').val();

但是我如何将其添加到其他字段？

更新

我该如何修复这个新版本？

http://jsfiddle.net/rEQnY/8/

我想要2个不同的字段来为另一个字段添加值。

如果下拉列表1（单独）将第3个输入文本框添加2，则第3个输入文本框应为3。

如果下拉2（单独）将第2个输入文本框添加2，则第3个输入文本框应为3。

如果在两个下拉列表中都选择了2，则应将4添加到第3个输入文本框并变为5。

如果重置下拉列表1或下拉列表2，意味着选择“选择一个”，则应将第三个输入文本框减去2，使其为3。

正如您在我的示例中所看到的，只有一个下拉列表添加到该字段中。既可以是，也可以不是两者兼而有之。我希望两者都能够添加到它并在选择默认的“选择一个”时将其带走。

Answer 1

$('#otherField').val(Number($('#numbers').val())+1);

<强>更新

HTML

<p>
<select id="numbers" name="numbers" class="numbers">
      <option value="">pick one</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      </select>
</p>
<p>
<select id="morenumbers" name="morenumbers" class="numbers">
      <option value="">pick one</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      </select>
</p>

的jQuery

$(".numbers").change(function() {
            //grab selected value and add it to the 3rd text field
            //so if 2 is selected, the field with 1 becomes 3 and the total sum becomes 12
            var first;
            var second;
            var initial = 1;
            if($('#morenumbers').val() == '')
                first = 0;
            else
                first = Number($('#morenumbers').val());
            if($('#numbers').val() == '')
                second = 0;
            else
                second = Number($('#numbers').val());
            $('#third').val(first+second+initial);
            $("input[name^=sum]").sum("keyup", "#totalSum");
        });

小提琴

http://jsfiddle.net/rEQnY/9/

Answer 2

只需这样做：

// On selected option change...
$("#numbers").change(function() {
    var 
        // Get the selected value as an integer
        value = +$(this).val(),

        // Get the third input field
        $thirdInput = $('input[name^="sum"]:nth-child(3)')
    ;

    // Increase the third input field's value by the selected option value
    $thirdInput.val(+$thirdInput.val() + value);

    // Recalculate the sum
    $("input[name^=sum]").sum("keyup", "#totalSum");
});

Working JSFiddle demo

这里我们使用unary +将输入值和下拉值转换为整数。

修改：评论中的进一步要求：

如果下拉列表从编号值更改为“选择一个”选项，我需要撤消添加内容并返回之前的状态。

为此，我们可以声明一个新的全局变量，该变量设置为第三个文本字段的初始值：

var thirdSumValue = 1;

然后在我们的下拉列表change事件中使用它：

$thirdInput.val(thirdSumValue + value);

Updated JSFiddle demo

或者，不要硬编码其默认值，只需将其设置为加载时文本字段的值：

var thirdSumValue = +$('input[name^="sum"]:nth-child(3)').val();

这将反映加载JavaScript之前的所有默认HTML值。

<强> Final JSFiddle demo

如何在输入文本字段中添加或增加数值？

2 个答案: