Определите значение вычитания с помощью выбора для множественного выбора - PullRequest
Новая
       46

Определите значение вычитания с помощью выбора для множественного выбора

0 голосов
/ 27 апреля 2020

Я делаю счетчик точек, где в зависимости от выбора, тому или иному значению будет присвоено начальное значение, то есть X / Y / Z, где X - это количество, определенное выбором, Y относится к отрицательная сумма, и, наконец, Z относится к общей сумме простого вычитания XY.

Сначала я определил значение X с помощью выбора, который мы назовем «Títulos», выбирая при этом другой выбор, который мы будем называть «Атрибуты», будет вычтено то или иное значение. Проблема в том, что когда я определяю X с первым выбором, при втором выборе значение X сбрасывается на 0.

С другой стороны, есть ли способ ограничить ответы только в выборе, например из каждого атрибута можно только выбрать 1. 

const select = document.querySelector('.multipleChosen');
const positivos = document.getElementById('positivos');
const negativos = document.querySelector('input[name=negativos]');
const total = document.querySelector('input[name=total]');
const errorMessage = document.getElementById('error-message');

$(document).ready(function() {
  //Chosen
  $(select).chosen({
    placeholder_text_multiple: "Atributos" //placeholder
  }).change(calculate);
  calculate();
})

function calculate() {
  setTimeout(() => { // give the DOM time to update
    let choices = [...document.querySelectorAll('.search-choice span')]
      .map(choice => document.querySelector(`option[value='${choice.innerHTML}']`));

    let positiveChoicesTotalCost = choices
      .filter(choice => choice.dataset.cost < 0)
      .reduce((sum, choice) => sum + Number(choice.dataset.cost), 0);

    let negativeChoicesTotalCost = choices
      .filter(choice => choice.dataset.cost > 0)
      .reduce((sum, choice) => sum + Number(choice.dataset.cost), 0);

    let z = positiveChoicesTotalCost + negativeChoicesTotalCost;

    positivos.value = positiveChoicesTotalCost;
    negativos.value = negativeChoicesTotalCost;
    total.value = z;
    
    if (z < 0) {
      total.classList.add('error');
      errorMessage.classList.add('show');
    } 
    
    else {
      total.classList.remove('error');
      errorMessage.classList.remove('show');
    }
  }, 0);
}



$('.pp').on('change', function() {
var value =this.value;
    if(value == 'Gran Casa con Supremacía')
    {
        $('.puntosdepoblacion').val('11');
    }
  if(value == 'Gran Casa')
    {
        $('.puntosdepoblacion').val('9');
    }
  if(value == 'Casa Vasalla')
    {
        $('.puntosdepoblacion').val('7');
    }
  
  });
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"> 
</script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"><meta charset="UTF-8" content="text/html" http-equiv="Content-Type" /><form method="POST" action="035-ejemplo-atributos-min-max-html5.php" name="formu" class="formu"><div class="row">

<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 id="dropdown" name="rasgos" class="multipleChosen " multiple="true">
  <optgroup label="Población">
   <option value="Nivel 1" data-cost="-1">Nivel 1</option>
    <option value="Nivel 2" data-cost="-2">Nivel 2</option>
    <option value="Nivel 3" data-cost="-3">Nivel 3</option>
    <option value="Nivel 4" data-cost="-4">Nivel 4</option>
    <option value="Nivel 5" data-cost="-5">Nivel 5</option>
    <option value="Nivel 6" data-cost="-6">Nivel 6</option>
    <option value="Nivel 7" data-cost="-7">Nivel 7</option>
    <option value="Nivel 8" data-cost="-8">Nivel 8</option>
    <option value="Nivel 9" data-cost="-9">Nivel 9</option>
        </optgroup><optgroup label="Recursos">
      <option value="Nivel 1" data-cost="-1">Nivel 1</option>
    <option value="Nivel 2" data-cost="-2">Nivel 2</option>
    <option value="Nivel 3" data-cost="-3">Nivel 3</option>
    <option value="Nivel 4" data-cost="-4">Nivel 4</option>
    <option value="Nivel 5" data-cost="-5">Nivel 5</option>
    <option value="Nivel 6" data-cost="-6">Nivel 6</option>
    <option value="Nivel 7" data-cost="-7">Nivel 7</option>
    <option value="Nivel 8" data-cost="-8">Nivel 8</option>
    <option value="Nivel 9" data-cost="-9">Nivel 9</option>
       </optgroup><optgroup label="Milicia">
      <option value="Nivel 1" data-cost="-1">Nivel 1</option>
    <option value="Nivel 2" data-cost="-2">Nivel 2</option>
    <option value="Nivel 3" data-cost="-3">Nivel 3</option>
    <option value="Nivel 4" data-cost="-4">Nivel 4</option>
    <option value="Nivel 5" data-cost="-5">Nivel 5</option>
    <option value="Nivel 6" data-cost="-6">Nivel 6</option>
    <option value="Nivel 7" data-cost="-7">Nivel 7</option>
    <option value="Nivel 8" data-cost="-8">Nivel 8</option>
    <option value="Nivel 9" data-cost="-9">Nivel 9</option>
    </optgroup><optgroup label="Influencia">
      <option value="Nivel 1" data-cost="-1">Nivel 1</option>
    <option value="Nivel 2" data-cost="-2">Nivel 2</option>
    <option value="Nivel 3" data-cost="-3">Nivel 3</option>
    <option value="Nivel 4" data-cost="-4">Nivel 4</option>
    <option value="Nivel 5" data-cost="-5">Nivel 5</option>
    <option value="Nivel 6" data-cost="-6">Nivel 6</option>
    <option value="Nivel 7" data-cost="-7">Nivel 7</option>
    <option value="Nivel 8" data-cost="-8">Nivel 8</option>
    <option value="Nivel 9" data-cost="-9">Nivel 9</option>
    </optgroup><optgroup label="Ley">
      <option value="Nivel 1" data-cost="-1">Nivel 1</option>
    <option value="Nivel 2" data-cost="-2">Nivel 2</option>
    <option value="Nivel 3" data-cost="-3">Nivel 3</option>
    <option value="Nivel 4" data-cost="-4">Nivel 4</option>
    <option value="Nivel 5" data-cost="-5">Nivel 5</option>
    <option value="Nivel 6" data-cost="-6">Nivel 6</option>
    <option value="Nivel 7" data-cost="-7">Nivel 7</option>
    <option value="Nivel 8" data-cost="-8">Nivel 8</option>
    <option value="Nivel 9" data-cost="-9">Nivel 9</option>
  </optgroup>
</select><div class="puntosrasgos"><div class="col-six"><div class="titulopuntosrasgos">Puntos de Población [PP]</div></div><div class="col-four"><div class="input-group">
<div class="col-rasgos"><p><label for="negativos" name="negativos"></label>
<input id="negativos" type="text" disabled="" name="negativos" value="" placeholder="Negativos" class="puntosdepoblacion"></p></div><div class="col-rasgos"><p>
<label for="positivos" name="positivos"></label>
<input id="positivos" type="text" disabled="" name="positivos" value="" placeholder="Positivos"></p></div><div class="col-rasgos"><p>
<label for="total" name="total"></label>
<input id="total" type="text" disabled="" name="total" class="titulos" value="" placeholder="Total">
</p></div></div></div><p id="error-message">
¡El último número (total) debe estar comprendido entre cero (0) o veinte (20)!
</p></div>

</div>
</form>
...