如何使用 Javascript 从选定字段中计算总数？答案

【问题标题】：How to calculate total from select fields with Javascript?如何使用 Javascript 从选定字段中计算总数？
【发布时间】：2014-11-18 05:19:30
【问题描述】：

所以它应该计算在选择列表中选择的所有内容，并且每个值都以 $ 符号开头（我认为这个 $ 符号应该是 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新手，不知道怎么解释。干杯。

【问题讨论】：

标签： javascript jquery forms select input

【解决方案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);
    });
});

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

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

【讨论】：

【解决方案2】：

给你：http://jsfiddle.net/tbq8eo8b/3/

$(document).ready(function(){
    $('select').change(function(){
        var totalVal = 0;
        $('select.add').each(function(){
           totalVal += parseInt($(this).val()) ;
        });
        $('input').val(totalVal);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="webform-component-select">
<label>Select amount #1</label>
<select class="add">
<option value="0" selected="selected">None</option>
<option value="200">$200</option>
<option value="300">$300</option>
</select><p>
<label>Select amount #2</label>
<select class="add">
<option value="0" selected="selected">None</option>
<option value="200">$200</option>
<option value="300">$300</option>
</select><p>
<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><p>
<label>Total amount</label>
<input disabled>
</div>

【讨论】：

【解决方案3】：

听起来你可以使用KnockoutJS。

不确定在开始学习 JavaScript 时这是否正确，但它可以很好地完成您想要实现的目标。而且您可以避免大量错误和丑陋的 jQuery 代码。

浏览我链接的教程，看看你是否喜欢。

【讨论】：

如果您投反对票，请留下评论并说明理由。否则就等于说完就跑了。