javascript - 如何使用 Javascript 计算选定字段的总计？

Question

所以它应该计算选择列表中选择的所有内容，并且每个值以 $ 符号开头(我认为这个 $ 符号应该是 js 检测的主字符串或其他东西，不能是类或 ID，因为结束-用户总是自己创建自定义表单)

我做了一些 html 表单草图 http://jsfiddle.net/tbq8eo8b/2/

<div class="webform-component-select">
    <label>Select amount #1</label>
    <select>
        <option selected="selected">None</option>
        <option>$200</option>
        <option>$300</option>
    </select>
    <label>Select amount #2</label>
    <select>
        <option selected="selected">None</option>
        <option>$200</option>
        <option>$300</option>
    </select>
    <label>Some random select list</label>
    <select>
         <option selected="selected">None</option>
         <option>This list has no dollar sign, so do not calculate it whatever is selected in here</option>
    </select>
    <label>Total amount</label>
    <input disabled>
</div>

因此，当用户从一个表单中选择金额时，js 会自动将其添加到“总金额”字段中。当用户从另一个字段选择另一个金额时，js 会将其添加到当前总计并用新的总计更新。因此，如果用户选择 100 美元和 100 美元，则总计为 200 美元。

我不知道。我是js新手，不知道如何解释。干杯。

Answer 1

最简单的方法是为相关选项元素提供适当的 value 属性:

<option value="200">$200</option>

...这样您就不必处理美元符号。但是，如果由于某种原因您不能这样做，您可以使用正则表达式提取美元符号后面的值，同时忽略没有美元符号的字段:

$(document).ready(function () {
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/^\$(\d+)$/);
            total += val ? +val[1] : 0;
        });
        $("#total").val(total);
    });
});

我给了total字段一个id，这样你就可以从JS引用它来更新它的值。如果由于某种原因你不能这样做，我想你可以说 $("input[disabled]").val(total) 或类似的，但如果用户正在创建表格。

演示:http://jsfiddle.net/tbq8eo8b/6/