Рассчитать сумму на основе выбранного элемента

Question

У меня есть форма, в которой пользователь должен выбрать название товара, атрибуты товара и ввести количество товара. Новая форма клонируется, если пользователь хочет больше элементов.

Я хочу рассчитать сумму всех количеств конкретного наименования товара.

Случай использования:

• Пользователь выбирает название предмета ABC, атрибуты и вводит в поле количества 100
• Во второй "форме" (контейнер div) выбирается ABC, выбирает другие атрибуты и вводит количество 50
• В третьей "форме" (контейнер div) выбираем PQR, атрибуты, вводит количество 430
• В 4-й "форме" (контейнер div) выбираем PQR, выбирает атрибуты, вводит количество 150

Мне нужно добавить сумму всех PQR и ABC и отобразить значение в соответствующих полях ввода.

Что я сделал до сих пор:

$('.quantity-input').on('blur', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = 0;
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    console.log(item_name);
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });

  var input_item_name = $('input[data-item-name="' + item_name + '" ]');

  if (input_item_name.length) {
    input_item_name.val(sum);

  } else {
    $('.add-item-quantity').append('<p><input type="text" value="' + sum + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>

<div class="add-item-quantity">
</div>

Хотя этот код вычисляет сумму, он вычисляет сумму всех выбранных элементов и отображается в одном поле ввода. Я хочу вычислить сумму входных данных на основе выбранных имен элементов, а количество каждого выбранного элемента должно отображать сумму в другом поле ввода. Например, (ABC сумма будет отображаться в одном поле ввода, а PQR сумма будет отображаться в другом поле ввода.

Любая помощь будет оценена.

Answer 1

Вы можете создать sum как объект, который имеет свойства, равные именам элементов, а затем добавить соответствующие суммы для имени элемента.

Я также уничтожал бы вывод каждый раз, когда вы обновляете его, так как некоторые имена элементов могут быть удалены из выборов, а затем вам нужно будет явно удалить их из вывода. Проще начать с нуля.

Также убедитесь, что вы отвечаете на изменение в выборе имени элемента, чтобы обновить вывод:

$('.quantity-input,.select-item-name').on('change', function() {
  getTotalQuantity();
});


function getTotalQuantity() {
  var $qr = $('.quantity-input');
  var sum = {};
  var item_name;

  $qr.each(function(i, obj) {
    var self = $(this);
    item_name = self.closest(".abc-form").find('.select-item-name').val();
    item_name = item_name.replace(/\s/g, '').toLowerCase();

    if (!isNaN(this.value) && this.value.length != 0) {
      sum[item_name] = (sum[item_name] || 0) + parseFloat(this.value);
    }

  });
  
  $('.add-item-quantity').empty();
  for (item_name in sum) {
      $('.add-item-quantity').append('<p>' + item_name + ':' + 
            '<input type="text" value="' + sum[item_name] + '" class="' + item_name + '" data-item-name="' + item_name + '"/></p>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<div class="abc-form">
  <select class="select-item-name">
    <option>ABC</option>
    <option>PQR</option>
    <option>XYZ</option>
  </select>
  <input type="text" class="quantity-input">
</div>
<button class="calc">
  Calculate
</button>

<div class="add-item-quantity">
</div>