Question

所以它应该计算选择列表中所选内容的所有内容，每个值都以$符号开头（我认为这个$符号应该是js检测on或者某个东西的主字符串，不能是类或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);
    });
});

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

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

Answer 3

听起来你可以使用KnockoutJS。

在进入JavaScript时，不确定它是否是正确的开始，但它确实很好地实现了您想要实现的目标。而且你将自己从许多错误和丑陋的jQuery代码中解脱出来。

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

如何使用Javascript从选择字段计算总计？

3 个答案: