2

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

我正在使用 sum 示例。

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

现在在一个单独的操作中，我想增加先前已由值填充的字段之一的值，然后再次重新计算。

我设置了我正在尝试做的事情。

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

有一个带有选项的下拉菜单。每个选项都有一个数值。

现在作为一个例子，让我们随机选择一个字段。假设第三个字段中有一个数字“1”。

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

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

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

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

但是我如何将它添加到另一个字段？

更新：

我如何修复这个新版本？

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

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

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

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

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

如果下拉 1 或下拉 2 被重置，即选择“选择一个”，则应将第 3 个输入文本框减去 2，使其变为 3。

正如您在我的示例中看到的那样，只有一个下拉菜单添加到该字段。可以是两者之一，但不能两者兼而有之。我希望两者都能够添加并在选择默认的“选择一个”时从中脱颖而出。

4

2 回答 2

1

只需这样做：

// 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");
});

工作 JSFiddle 演示。

在这里，我们使用一元+将输入和下拉列表的值转换为整数。

编辑：评论中提出的进一步要求：

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

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

var thirdSumValue = 1;

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

$thirdInput.val(thirdSumValue + value);

更新了 JSFiddle 演示。

或者，您可以简单地将其设置为加载时文本字段的值，而不是对其默认值进行硬编码：

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

这将反映加载 JavaScript 之前的任何默认 HTML 值。

最终的 JSFiddle 演示。

于 2013-10-24T20:24:20.173 回答
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/

于 2013-10-24T20:20:56.990 回答