如何使用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

你去这里： 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> 

Answer 2

最简单的方法是为相关选项元素赋予适当的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/

Answer 3

听起来您可以对KnockoutJS有所用。

不确定进入JavaScript是否正确，但是它确实可以达到您想要实现的目标。 而且，您将避免使用许多臭虫和丑陋的jQuery代码。

查看我链接的教程，看看是否喜欢。