Buenas noches.

Estoy tratando de completar varias entradas dependiendo de dos selecciones diferentes, donde diferentes combinaciones de ambas selecciones darán resultados diferentes en las entradas.

De momento tengo esto, pero no sé cómo vincular 'carrera' con 'nivel' para que cuando se seleccionen ambos aparezca el número correspondiente lleno, como quien dice que sería poner datos de una tabla de doble entrada en javascript.

$('.raza').on('change', function() {
var value =this.value;
    if(value == 'Brujas y brujos');
   else if(value == 'Nivel nato');
    {
        $('.fue').val('6');
       $('.mag').val('10');
       $('.res').val('2');
         $('.vel').val('2');
         $('.vit').val('55');
    }
  if(value == 'Brujas y brujos');
   else if(value == 'Nivel nato');
    {
         $('.fue').val('8');
       $('.mag').val('20');
       $('.res').val('4');
         $('.vel').val('3');
         $('.vit').val('65');
    }
 
  if(value == 'Brujas y brujos');
   else if(value == 'Nivel medio');
    {
         $('.fue').val('10');
       $('.mag').val('30');
       $('.res').val('6');
         $('.vel').val('4');
         $('.vit').val('80');
      
          }
      
      if(value == 'Brujas y brujos');
   else if(value == 'Nivel total');
    {
         $('.fue').val('12');
       $('.mag').val('40');
       $('.res').val('8');
         $('.vel').val('5');
         $('.vit').val('90');
         
         if(value == 'Hijos de Eva');
   else if(value == 'Nivel nato');
    {
        $('.fue').val('7');
       $('.mag').val('0');
       $('.res').val('3');
         $('.vel').val('2');
         $('.vit').val('50');
    }
  if(value == 'Hijos de Eva');
   else if(value == 'Nivel nato');
    {
         $('.fue').val('9');
       $('.mag').val('0');
       $('.res').val('5');
         $('.vel').val('3');
         $('.vit').val('60');
    }
 
  if(value == 'Hijos de Eva');
   else if(value == 'Nivel medio');
    {
         $('.fue').val('11');
       $('.mag').val('0');
       $('.res').val('7');
         $('.vel').val('4');
         $('.vit').val('70');
      
          }
      
      if(value == 'Hijos de Eva');
   else if(value == 'Nivel total');
    {
         $('.fue').val('13');
       $('.mag').val('0');
       $('.res').val('9');
         $('.vel').val('5');
         $('.vit').val('85');
  
  });
<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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">
<select  name="titulos" class="raza"><option hidden value="" disabled selected>Raza</option><option label="Brujas y brujos">Brujas y brujos</option>
  <option label="Hijos de Eva">Hijos de Eva</option>
    <option label="Humanos">Humanos</option>
    <option label="Licántropos">Licántropos</option>
  <option label="Sirenas y tritones">Sirenas y tritones</option>
     <option label="Vampiros">Vampiros</option>
  </select>
  
  <select  name="titulos" class="nivel"><option hidden value="" disabled selected>Nivel</option><option label="Nivel nato">Nivel nato</option>
  <option label="Nivel primario">Nivel primario</option>
    <option label="Nivel medio">Nivel medio</option>
    <option label="Nivel total">Nivel total</option>
  </select>
  
  
  <table style=" display: flex; justify-content: center; align-items: center; "><tbody><tr><td><div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div></td><td><div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div></td><td><div class="stats"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div></td><td><div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div></td><td><div class="stats" style=" width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div></td></tr></tbody></table></div>
  

¿Qué puedo hacer? ¡Gracias por adelantado!

0
user14133953 26 ago. 2020 a las 23:23

2 respuestas

La mejor respuesta

Ejemplo de trabajo:

$('.raza,.nivel').on('change', function() {
  var raza = $('.raza').val();
  var nivel = $('.nivel').val();
  
  if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
    $('.fue').val('6');
    $('.mag').val('10');
    $('.res').val('2');
    $('.vel').val('2');
    $('.vit').val('55');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
    $('.fue').val('8');
    $('.mag').val('20');
    $('.res').val('4');
    $('.vel').val('3');
    $('.vit').val('65');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel medio') {
    $('.fue').val('10');
    $('.mag').val('30');
    $('.res').val('6');
    $('.vel').val('4');
    $('.vit').val('80');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel total') {
    $('.fue').val('12');
    $('.mag').val('40');
    $('.res').val('8');
    $('.vel').val('5');
    $('.vit').val('90');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
    $('.fue').val('7');
    $('.mag').val('0');
    $('.res').val('3');
    $('.vel').val('2');
    $('.vit').val('50');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
    $('.fue').val('9');
    $('.mag').val('0');
    $('.res').val('5');
    $('.vel').val('3');
    $('.vit').val('60');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel medio') {
    $('.fue').val('11');
    $('.mag').val('0');
    $('.res').val('7');
    $('.vel').val('4');
    $('.vit').val('70');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel total') {
    $('.fue').val('13');
    $('.mag').val('0');
    $('.res').val('9');
    $('.vel').val('5');
    $('.vit').val('85');
  } else {
    // default?
    $('.fue').val('0');
    $('.mag').val('0');
    $('.res').val('0');
    $('.vel').val('0');
    $('.vit').val('0');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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">

<select name="titulos" class="raza">
  <option hidden value="" disabled selected>Raza</option>
  <option value="Brujas y brujos">Brujas y brujos</option>
  <option value="Hijos de Eva">Hijos de Eva</option>
  <option value="Humanos">Humanos</option>
  <option value="Licántropos">Licántropos</option>
  <option value="Sirenas y tritones">Sirenas y tritones</option>
  <option value="Vampiros">Vampiros</option>
</select>

<select name="titulos" class="nivel">
  <option hidden value="" disabled selected>Nivel</option>
  <option value="Nivel nato">Nivel nato</option>
  <option value="Nivel primario">Nivel primario</option>
  <option value="Nivel medio">Nivel medio</option>
  <option value="Nivel total">Nivel total</option>
</select>


<table>
  <tbody>
    <tr>
      <td>
        <div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div>
      </td>
      <td>
        <div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div>
      </td>
      <td>
        <div class="stats" style="width: 120px;"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div>
      </td>
      <td>
        <div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div>
      </td>
      <td>
        <div class="stats" style="width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div>
      </td>
    </tr>
  </tbody>
</table>
</div>

Nota: solo que no entiendo por qué necesita tantas bibliotecas en un código tan pequeño.

Nota 2: hay tantas cosas aquí para optimizar ... Escriba un comentario si está de acuerdo con esta respuesta y la entiende, para que podamos intentar optimizar un poco.

1
Anton 26 ago. 2020 a las 21:06

Usar if / else if para hacer esto es la mejor manera de volver locos a todos, especialmente cuando se trata de mantenimiento de código. necesita usar una tabla de transcodificación para esto:

const myForm = document.getElementById('my-form')
  ,   fue = document.getElementById('fue')
  ,   mag = document.getElementById('mag')
  ,   res = document.getElementById('res')
  ,   vel = document.getElementById('vel')
  ,   vit = document.getElementById('vit')
 
const raza_nivel =
      { r1_n1 : { fue:  6, mag: 10, res: 2, vel: 2, vit: 55 }  // Brujas y brujos
      , r1_n2 : { fue:  8, mag: 20, res: 4, vel: 3, vit: 65 }
      , r1_n3 : { fue: 10, mag: 30, res: 6, vel: 4, vit: 80 }
      , r1_n4 : { fue: 12, mag: 40, res: 8, vel: 5, vit: 80 }
      , r2_n1 : { fue: 12, mag: 40, res: 8, vel: 5, vit: 90 }  // Hijos de Eva
      , r2_n2 : { fue:  7, mag:  0, res: 3, vel: 2, vit: 50 }
      , r2_n3 : { fue:  9, mag:  0, res: 5, vel: 3, vit: 60 }
      , r2_n4 : { fue: 11, mag:  0, res: 7, vel: 4, vit: 70 }
      , r3_n1 : { fue:0, mag:0, res:0, vel:0, vit:01 }  // Humanos
      , r3_n2 : { fue:0, mag:0, res:0, vel:0, vit:02 }
      , r3_n3 : { fue:0, mag:0, res:0, vel:0, vit:03 }
      , r3_n4 : { fue:0, mag:0, res:0, vel:0, vit:04 }
      , r4_n1 : { fue:0, mag:0, res:0, vel:0, vit:05 }  // Licántropos
      , r4_n2 : { fue:0, mag:0, res:0, vel:0, vit:06 }
      , r4_n3 : { fue:0, mag:0, res:0, vel:0, vit:07 }
      , r4_n4 : { fue:0, mag:0, res:0, vel:0, vit:08 }
      , r5_n1 : { fue:0, mag:0, res:0, vel:0, vit:09 }  // Sirenas y tritones
      , r5_n2 : { fue:0, mag:0, res:0, vel:0, vit:10 }
      , r5_n3 : { fue:0, mag:0, res:0, vel:0, vit:11 }
      , r5_n4 : { fue:0, mag:0, res:0, vel:0, vit:12 }
      , r6_n1 : { fue:0, mag:0, res:0, vel:0, vit:13 }  // Vampiros
      , r6_n2 : { fue:0, mag:0, res:0, vel:0, vit:14 }
      , r6_n3 : { fue:0, mag:0, res:0, vel:0, vit:15 }
      , r6_n4 : { fue:0, mag:0, res:0, vel:0, vit:16 }
      }

myForm.oninput=()=>
  {
  let key = myForm.raza.value + '_' + myForm.nivel.value
  if (key.length === 5)
    {
    fue.value = raza_nivel[key].fue
    mag.value = raza_nivel[key].mag
    res.value = raza_nivel[key].res
    vel.value = raza_nivel[key].vel
    vit.value = raza_nivel[key].vit
    }
  }
<form action="xx" id="my-form">
  <select name="raza">
    <option hidden value="" disabled selected>Raza</option>
    <option value="r1" >Brujas y brujos    </option>
    <option value="r2" >Hijos de Eva       </option>
    <option value="r3" >Humanos            </option>
    <option value="r4" >Licántropos        </option>
    <option value="r5" >Sirenas y tritones </option>
    <option value="r6" >Vampiros           </option>
  </select>

  <select name="nivel">
    <option hidden value="" disabled selected>Nivel</option>
    <option value="n1" >Nivel nato     </option>
    <option value="n2" >Nivel primario </option>
    <option value="n3" >Nivel medio    </option>
    <option value="n4" >Nivel total    </option>
  </select>
</form>
  <br>
  <input id="fue" type="text" class="fue" value="" placeholder="0">
  Fuerza
  <br>
  <input id="mag" type="text" class="mag" value="" placeholder="0">
  Magia
  <br>
  <input id="res" type="text" class="res" value="" placeholder="0">
  Resistencia
  <br>
  <input id="vel" type="text" class="vel" value="" placeholder="0">
  Velocidad
  <br>
  <input id="vit" type="text" class="vit" value="" placeholder="0">
  Vitalidad
0
Mister Jojo 26 ago. 2020 a las 21:35