Пересчитать сумму выбранного варианта при изменении

Question

У меня есть этот селектор с расчетом на изменение выбора на основе атрибута идентификатора суммы опции и номера входа, проблема в том, что я выбираю вариант 1 и увеличиваю число ввода, работает нормально, но когда я выбираю вариант 2 или 3 и вставляю Введенный номер снова подсчитывает общую сумму. Я пытаюсь, когда я выбираю разные варианты, если было внесено изменение, общая цена снова совпадает с идентификатором опции.

// Input number
 $('input[name=\'cantitate\']').on('change', function() {
      var cant  = $('#cantitate').val();
      var price = $(this).children(":selected").attr("id");
    $('#total').text(price * cant + ' USD');

  });
// Select box
 $('#variantacurs').on('change', function() {
       var cant  = $('#cantitate').val();
       var price = $(this).children(":selected").attr("id");
     $('#total').text(price * cant + ' USD');

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total">60</div>

  <select class="form-control" id="variantacurs" name="variantacurs">
    <option value="">---SELECT---</option>
     <option id="100" value="Option 1">Option 1</option>
     <option id="210" value="Option 2">Option 2</option>
     <option id="300" value="Option 3">Option 3</option>
  </select>

 <input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1" >

Answer 1

В этом коде есть несколько ошибок:

1. Тег id не является хорошим способом хранения значений. Значения могут быть сохранены в самом атрибуте value, тогда как метка является фактическим содержимым элемента <option>. Это также упрощает получение значений.
2. Вы можете просто определить функцию (например, calc() в моем примере) и назначить ее ссылку на onchange входов вместо повторяющегося кода.
3. Используйте Number() для преобразования строкового ввода из val() в правильные числа.

Пример:

// Input number
$('input[name=\'cantitate\']').on('change', calc);
$('#variantacurs').on('change', calc);

function calc() {
      var cant = Number($('#cantitate').val());
      var price = Number($('#variantacurs').val());
      $('#total').text(cant * price + ' USD');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total">60</div>

<select class="form-control" id="variantacurs" name="variantacurs">
  <option value="60" disabled selected>---SELECT---</option>
  <option value="100">Option 1</option>
  <option value="210">Option 2"</option>
  <option value="300">Option 3"</option>
</select>

<input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1">

Answer 2

Typo, используйте .form-control выбранное значение ввода / выбора.

$(".form-control").children(":selected")

$("input[name='cantitate']").on("change", function () {
  var cant = $("#cantitate").val();
  var price = $(".form-control").children(":selected").attr("id");
  console.log(price)
  $("#total").text(price * cant + " USD");
});

Я рекомендую не использовать id для значения, используйте значение как ценность. Некоторую чистку можно сделать, как показано ниже.

(function ($) {
  // Input number
  const input = $("input[name='cantitate']");
  const select = $(".form-control");
  input.on("change", function () {
    calculate($(this).val(), select.children(":selected").val());
  });
  // Select box
  select.on("change", function () {
    calculate(input.val(), $(this).val());
  });
  function calculate(input, selected) {
    var cant = Number(input);
    var price = Number(selected);
    $("#total").text(`Total: ${price * cant + " USD"}`);
  }
})($);

.as-console {
  min-height: 100% !important;
}

.as-console-row {
  color: blue !important;
}

<div id="total">Total: 0</div>
    <select class="form-control" id="variantacurs" name="variantacurs">
        <option value="">---SELECT---</option>
        <option value="100">Option 1</option>
        <option value="200">Option 2</option>
        <option value="300">Option 3</option>
    </select>
    <input type="number" name="cantitate" placeholder="1" min="1" value="1">
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>