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

查看我鏈接的教程，看看是否喜歡。