Проблема в автоматическом c добавлении входов путем выбора значений в Select

Question

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

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

Что я могу сделать?

$('.pp').on('change', function() {
var value =this.value;
    if(value == 'Gran Casa con Supremacía')
    {
        $('.puntosdepoblacion').val('11');
       $('.arcas').val('3 Arcas de Oro');
    }
  if(value == 'Gran Casa')
    {
        $('.puntosdepoblacion').val('9');
      $('.arcas').val('5 Arcas de Oro');
    }
  if(value == 'Casa Vasalla')
    {
        $('.puntosdepoblacion').val('7');
      $('.arcas').val('7 Arcas de Oro');
    }
  
  });

$(document).ready(function() {
  $(".a2, .b2").on("keydown keyup", function(event) {
    var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
    tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
  });
});

$('.select').on("change", function(){
  var total=0;
  $('.select').each(function(){
    var price = parseFloat($(this).find("option:selected").data("price"));
    console.log( price );
    total += price;
  });
  $("#opt_price").val(total.toFixed(0))
});

$('.amt').keyup(function() {
var importe_total = 0
  $(".amt").each(
    function(index, value) {
      if ( $.isNumeric( $(this).val() ) ){
      importe_total = importe_total + eval($(this).val());
      //console.log(importe_total);
      }
    }
  );
      $("#inputTotal").val(importe_total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table><select  name="titulos" class="pp"><option hidden value="" disabled selected>Títulos</option><option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
  <option label="Gran Casa">Gran Casa</option>
  <option label="Casa Vasalla">Casa Vasalla</option></select><select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
   <option data-price="0">Nivel 0</option><option data-price="-1">Nivel 1</option>
    <option data-price="-2">Nivel 2</option>
    <option data-price="-3">Nivel 3</option>
    <option data-price="-4">Nivel 4</option>
    <option data-price="-5">Nivel 5</option>
    <option data-price="-6">Nivel 6</option>
    <option data-price="-7">Nivel 7</option>
    <option data-price="-8">Nivel 8</option>
    <option data-price="-9">Nivel 9</option></select>
<select class="select" name="recursos">
  <option disabled selected data-price="0">Recursos</option>
   <option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
    <option data-price="-2">Nivel 2</option>
    <option data-price="-3">Nivel 3</option>
    <option data-price="-4">Nivel 4</option>
    <option data-price="-5">Nivel 5</option>
    <option data-price="-6">Nivel 6</option>
    <option data-price="-7">Nivel 7</option>
    <option data-price="-8">Nivel 8</option>
    <option data-price="-9">Nivel 9</option></select>
<select class="select" name="milicia">
  <option disabled selected data-price="0">Milicia</option>
   <option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
    <option data-price="-2">Nivel 2</option>
    <option data-price="-3">Nivel 3</option>
    <option data-price="-4">Nivel 4</option>
    <option data-price="-5">Nivel 5</option>
    <option data-price="-6">Nivel 6</option>
    <option data-price="-7">Nivel 7</option>
    <option data-price="-8">Nivel 8</option>
    <option data-price="-9">Nivel 9</option></select><select class="select" name="influencia">
  <option disabled selected data-price="0">Influencia</option>
   <option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
    <option data-price="-2">Nivel 2</option>
    <option data-price="-3">Nivel 3</option>
    <option data-price="-4">Nivel 4</option>
    <option data-price="-5">Nivel 5</option>
    <option data-price="-6">Nivel 6</option>
    <option data-price="-7">Nivel 7</option>
    <option data-price="-8">Nivel 8</option>
    <option data-price="-9">Nivel 9</option></select><select class="select" name="ley">
  <option disabled selected data-price="0">Ley</option>
  <option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
    <option data-price="-2">Nivel 2</option>
    <option data-price="-3">Nivel 3</option>
    <option data-price="-4">Nivel 4</option>
    <option data-price="-5">Nivel 5</option>
    <option data-price="-6">Nivel 6</option>
    <option data-price="-7">Nivel 7</option>
    <option data-price="-8">Nivel 8</option>
    <option data-price="-9">Nivel 9</option></select>

<div class="puntosrasgos"><div class="col-six" style="
    height: 40px;
    line-height: 40px;
"><div class="titulopuntosrasgos">Puntos de Población [PP]</div></div><div class="col-four"><div class="input-group" style="
    position: absolute;
    margin-top: -23px;
    margin-left: 145px;
">
<table style="">
<tbody><tr>

  <td width="10" rowspan="1" style="
    table-layout: fixed;
    min-width: 35px;
"><div class="col-pp"><input class="solo-numero amt puntosdepoblacion" type="number"  id="form-field-first"  value="0" name="positivos"></div></td>

  <td width="10" rowspan="1"><div class="col-pp"><input class="solo-numero amt" value="0" type="number"  id="opt_price" name="negativos"></div>
</td>

  <td colspan="3" height="10"><div class="solo-numero amt"><input id="inputTotal" class="solo-numero" value="0" type="number" disabled name="total"></div>
</td>
</tr>
</tbody></table></div></div></div>

Answer 1

Вы должны вручную инициировать событие при изменении значений input.

Сначала заставьте их реагировать на событие change:

$(".a2, .b2").on("keydown keyup change", function(event) {
  // Code ommited
})

Затем, когда бы вы ни обновить значение, вызвать событие: в обработчике .pp после блоков if:

$('.puntosdepoblacion').change();

и

$("#opt_price").val(total.toFixed(0)).change();

Полный код:

$(document).ready(function() {
  $('.pp').on('change', function() {
    var value = this.value;
    if (value == 'Gran Casa con Supremacía') {
      $('.puntosdepoblacion').val('11');
      $('.arcas').val('3 Arcas de Oro');
    }
    if (value == 'Gran Casa') {
      $('.puntosdepoblacion').val('9');
      $('.arcas').val('5 Arcas de Oro');
    }
    if (value == 'Casa Vasalla') {
      $('.puntosdepoblacion').val('7');
      $('.arcas').val('7 Arcas de Oro');
    }

    // Trigger the change event in .pp to force calculation    <---
    $('.puntosdepoblacion').change();
  });

  $('.select').on("change", function() {
    var total = 0;
    $('.select').each(function() {
      var price = parseFloat($(this).find("option:selected").data("price"));
      console.log(price);
      total += price;
    });
    $("#opt_price").val(total.toFixed(0))
      .change(); // Trigger
  });

  $(".a2, .b2").on("keydown keyup change", function(event) { // <--- Respond to change event, too
    var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
    tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
  });
});

<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="titulos" class="pp">
  <option hidden value="" disabled selected>Títulos</option>
  <option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
  <option label="Gran Casa">Gran Casa</option>
  <option label="Casa Vasalla">Casa Vasalla</option>
</select>
<select class="select" name="poblacion">
  <option disabled selected data-price="0">Población</option>
  <option data-price="0">Nivel 0</option>
  <option data-price="-1">Nivel 1</option>
  <option data-price="-2">Nivel 2</option>
  <option data-price="-3">Nivel 3</option>
  <option data-price="-4">Nivel 4</option>
  <option data-price="-5">Nivel 5</option>
  <option data-price="-6">Nivel 6</option>
  <option data-price="-7">Nivel 7</option>
  <option data-price="-8">Nivel 8</option>
  <option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="recursos">
  <option disabled selected data-price="0">Recursos</option>
  <option data-price="0">Nivel 0</option>
  <option data-price="-1">Nivel 1</option>
  <option data-price="-2">Nivel 2</option>
  <option data-price="-3">Nivel 3</option>
  <option data-price="-4">Nivel 4</option>
  <option data-price="-5">Nivel 5</option>
  <option data-price="-6">Nivel 6</option>
  <option data-price="-7">Nivel 7</option>
  <option data-price="-8">Nivel 8</option>
  <option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="milicia">
  <option disabled selected data-price="0">Milicia</option>
  <option data-price="0">Nivel 0</option>
  <option data-price="-1">Nivel 1</option>
  <option data-price="-2">Nivel 2</option>
  <option data-price="-3">Nivel 3</option>
  <option data-price="-4">Nivel 4</option>
  <option data-price="-5">Nivel 5</option>
  <option data-price="-6">Nivel 6</option>
  <option data-price="-7">Nivel 7</option>
  <option data-price="-8">Nivel 8</option>
  <option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="influencia">
  <option disabled selected data-price="0">Influencia</option>
  <option data-price="0">Nivel 0</option>
  <option data-price="-1">Nivel 1</option>
  <option data-price="-2">Nivel 2</option>
  <option data-price="-3">Nivel 3</option>
  <option data-price="-4">Nivel 4</option>
  <option data-price="-5">Nivel 5</option>
  <option data-price="-6">Nivel 6</option>
  <option data-price="-7">Nivel 7</option>
  <option data-price="-8">Nivel 8</option>
  <option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="ley">
  <option disabled selected data-price="0">Ley</option>
  <option data-price="0">Nivel 0</option>
  <option data-price="-1">Nivel 1</option>
  <option data-price="-2">Nivel 2</option>
  <option data-price="-3">Nivel 3</option>
  <option data-price="-4">Nivel 4</option>
  <option data-price="-5">Nivel 5</option>
  <option data-price="-6">Nivel 6</option>
  <option data-price="-7">Nivel 7</option>
  <option data-price="-8">Nivel 8</option>
  <option data-price="-9">Nivel 9</option>
</select>

<div class="puntosrasgos">
  <div class="col-six" style="height: 40px; line-height: 40px;">
    <div class="titulopuntosrasgos">Puntos de Población [PP]</div>
  </div>
  <div class="col-four">
    <div class="input-group" style="position: absolute; margin-top: -23px; margin-left: 145px;">
      <table style="">
        <tbody>
          <tr>
            <td width="10" rowspan="1" style="table-layout: fixed; min-width: 35px;">
              <div class="col-pp">
                <input class="col-xs-4 a2 puntosdepoblacion" type="number" disabled id="form-field-first" value="0" name="positivos">
              </div>
            </td>
            <td width="10" rowspan="1">
              <div class="col-pp">
                <input class="col-xs-4 b2" value="0" type="number" disabled id="opt_price" placeholder="0" name="negativos">
              </div>
            </td>
            <td colspan="3" height="10">
              <div class="col-pp">
                <input class="col-xs-4 c2" value="0" type="number" disabled id="form-field-first" placeholder="0" name="total">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>