Как вычислить сумму из полей выбора с помощью Javascript?

Question

Поэтому он должен рассчитать все, что выбрано в избранных списках, и каждое значение начинается с знака $ (я думал, что этот знак $ должен быть главной строкой для js для обнаружения или чего-то еще, не может быть классом или идентификатором, пользователь будет создавать пользовательские формы себя все время)

Я сделал некоторые формы 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); 
    }); 
}); 

Я дал общее поле id, чтобы вы могли ссылаться на него с JS, чтобы обновить его значение. Если вы не можете сделать это по какой-то причине, я думаю, вы могли бы сказать $("input[disabled]").val(total) или подобное, но это действительно не так, если пользователь создает форму.

Демо: http://jsfiddle.net/tbq8eo8b/6/

Answer 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>

Answer 3

Похоже, вы могли бы иметь некоторые используют для KnockoutJS.

Не уверен, с чего начать, когда вы идете на JavaScript, но прекрасно делает то, чего вы пытаетесь достичь. И вы избавитесь от множества ошибок и уродливого кода jQuery.

Ознакомьтесь с учебным пособием, которое я связал и посмотрю, хотите ли вы.