0

Una vez configuro el código, al generar el HTML asociado, por así decirlo, no me enumera la totalidad de elementos del select, únicamente el primer elemento en la lista al seleccionarlo. Me gustaría que se seleccionasen todos, seguidos de una , y con el último haya una "y", por ejemplo, Robusto, Delgado y Ingenuo, o, Robusto y Delgado.

Por otro lado, me gustaría añadir un límite de que el valor del total, es decir, el último valor, sea de 0-20, incluyendo ambos números, pero no mayor.

Y por último, añadir incompatibilidades entre algunas de las opciones, por ejemplo, al seleccionar el rasgo Robusto sería incompatible con En los huesos, y así. Gracias.

function generar() {

  var rasgos = document.formu.rasgos.value;
  var positivos = document.formu.positivos.value;
  var negativos = document.formu.negativos.value;
  var total = document.formu.total.value;


	var code = ""+rasgos+"";

	document.getElementById("code").innerHTML = code;

}

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: "Rasgos" //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), 10);

    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);
}
<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" /><link href="https://fonts.googleapis.com/css?family=Libre+Franklin|ABeeZee|Open+Sans|Lora:800|Great+Vibes|UnifrakturCook:700|UnifrakturMaguntia&display=swap" type="text/css" rel="stylesheet" /><meta charset="UTF-8" content="text/html" http-equiv="Content-Type" />
<div class="imggene">
	<div class="titlegene">
		GENERADOR DE FICHA GOTRPG 
	</div>
</div>
<form method="POST" action="035-ejemplo-atributos-min-max-html5.php" name="formu" class="formu">

<select name="rasgos" class="multipleChosen " multiple="true">
  <optgroup label="Positivos">
    <option value="Robusto" data-cost="-5">Robusto</option>
    <option value="Musculoso" data-cost="-5">Musculoso</option>
    <option value="Ágil" data-cost="-5">Ágil</option>
    <option value="Con reflejos" data-cost="-6">Con reflejos</option>
    <option value="Preciso" data-cost="-6">Preciso</option>
    <option value="Afortunado" data-cost="-6">Afortunado</option>
    <option value="Atento" data-cost="-4">Atento</option>
    <option value="Agraciado" data-cost="-5">Agraciado</option>
    <option value="Vivaz" data-cost="-4">Vivaz</option>
    <option value="Culto" data-cost="-4">Culto</option>
    <option value="Noble" data-cost="-4">Noble</option>
    <option value="Líder" data-cost="-6">Líder</option>
    <option value="Defensor" data-cost="-6">Defensor</option>
    <option value="Precavido" data-cost="-6">Precavido</option>
    <option value="Orador" data-cost="-5">Orador</option>
    <option value="Sagaz" data-cost="-5">Sagaz</option>
    <option value="Aprendizaje rápido" data-cost="-6">Aprendizaje rápido</option>
    <option value="Crematomano" data-cost="-4">Crematomano</option>
    <option value="Regateador" data-cost="-4">Regateador</option>
    <option value="Domador" data-cost="-5">Domador</option>
  </optgroup>
  <optgroup label="Negativos">
    <option value="En los huesos" data-cost="4">En los huesos</option>
    <option value="Débil" data-cost="5">Débil</option>
    <option value="Lento" data-cost="5">Lento</option>
    <option value="Vago" data-cost="3">Vago</option>
    <option value="Glotón" data-cost="3">Glotón</option>
    <option value="Sin reflejos" data-cost="6">Sin reflejos</option>
    <option value="Sin puntería" data-cost="6">Sin puntería</option>
    <option value="Torpe" data-cost="6">Torpe</option>
    <option value="Dócil" data-cost="6">Dócil</option>
    <option value="Honesto" data-cost="5">Honesto</option>
    <option value="Obstuto" data-cost="3">Obstuto</option>
    <option value="Mal oído" data-cost="4">Mal oído</option>
    <option value="Feo" data-cost="3">Feo</option>
    <option value="Estéril" data-cost="3">Estéril</option>
    <option value="Aprendizaje lento" data-cost="6">Aprendizaje lento</option>
    <option value="Testarudo" data-cost="4">Testarudo</option>
    <option value="Tartamudo" data-cost="3">Tartamudo</option>
    <option value="Disoluto" data-cost="3">Disoluto</option>
    <option value="Ceguera" data-cost="7">Ceguera</option>
    <option value="Enfermizo" data-cost="3">Enfermizo</option>
  </optgroup>
</select>
    <div class="puntosrasgos"><div class="col-six"><div class="titulopuntosrasgos">Puntos de Rasgos [PR]</div></div><div class="col-four"><div class="input-group">
<div class="col-rasgos"><p>
  <label for="positivos" name="positivos"></label>
  <input id="positivos" type="text" disabled="" name="positivos" class="alin" value="" placeholder="Positivos" /></p></div><div class="col-rasgos"><p><label for="negativos" name="negativos"></label>
  <input id="negativos" type="text" disabled="" name="negativos" class="alin" value="" placeholder="Negativos" /></p></div><div class="col-rasgos"><p>
  <label for="total" name="total"></label>
  <input id="total" type="text" disabled="" name="total" class="alin" 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><input name="generar "class="boton" type="button" onclick="generar()" target="_parent" value="Generar" /><div class="codee"><textarea rows="8" id="code"></textarea></div></form></div>
</form>

1 respuesta 1

0

Para obtener todos los valores seleccionados, podrías utilizar la función que la librería de chosen ya trae incluída, estoy te devuelve un array de strings:

var rasgos = $("#dropdown").chosen().val();

Y para la parte final, podrías utilizar un for.

Si es la primera posición, ignoramos la coma, las que están en medio insertamos la coma, y si es la última insertamos una "y".

Aquí está el código modificado:

function generar() {

  //var rasgos = document.formu.rasgos.value;
  var rasgos = $("#dropdown").chosen().val();
  
  var rasgosFormateados = ""
  
  for(i = 0; i < rasgos.length; i++){
    if(i == 0)
      rasgosFormateados += rasgos[i]
    else if(i == rasgos.length - 1)
      rasgosFormateados += " y " + rasgos[i] + "."
    else
     rasgosFormateados += ", " + rasgos[i]
  }
  
  var positivos = document.formu.positivos.value;
  var negativos = document.formu.negativos.value;
  var total = document.formu.total.value;


	var code = ""+rasgosFormateados+"";

	document.getElementById("code").innerHTML = code;

}

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: "Rasgos" //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), 10);

    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);
}
<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" /><link href="https://fonts.googleapis.com/css?family=Libre+Franklin|ABeeZee|Open+Sans|Lora:800|Great+Vibes|UnifrakturCook:700|UnifrakturMaguntia&display=swap" type="text/css" rel="stylesheet" /><meta charset="UTF-8" content="text/html" http-equiv="Content-Type" />
<div class="imggene">
	<div class="titlegene">
		GENERADOR DE FICHA GOTRPG 
	</div>
</div>
<form method="POST" action="035-ejemplo-atributos-min-max-html5.php" name="formu" class="formu">

<select id="dropdown" name="rasgos" class="multipleChosen " multiple="true">
  <optgroup label="Positivos">
    <option value="Robusto" data-cost="-5">Robusto</option>
    <option value="Musculoso" data-cost="-5">Musculoso</option>
    <option value="Ágil" data-cost="-5">Ágil</option>
    <option value="Con reflejos" data-cost="-6">Con reflejos</option>
    <option value="Preciso" data-cost="-6">Preciso</option>
    <option value="Afortunado" data-cost="-6">Afortunado</option>
    <option value="Atento" data-cost="-4">Atento</option>
    <option value="Agraciado" data-cost="-5">Agraciado</option>
    <option value="Vivaz" data-cost="-4">Vivaz</option>
    <option value="Culto" data-cost="-4">Culto</option>
    <option value="Noble" data-cost="-4">Noble</option>
    <option value="Líder" data-cost="-6">Líder</option>
    <option value="Defensor" data-cost="-6">Defensor</option>
    <option value="Precavido" data-cost="-6">Precavido</option>
    <option value="Orador" data-cost="-5">Orador</option>
    <option value="Sagaz" data-cost="-5">Sagaz</option>
    <option value="Aprendizaje rápido" data-cost="-6">Aprendizaje rápido</option>
    <option value="Crematomano" data-cost="-4">Crematomano</option>
    <option value="Regateador" data-cost="-4">Regateador</option>
    <option value="Domador" data-cost="-5">Domador</option>
  </optgroup>
  <optgroup label="Negativos">
    <option value="En los huesos" data-cost="4">En los huesos</option>
    <option value="Débil" data-cost="5">Débil</option>
    <option value="Lento" data-cost="5">Lento</option>
    <option value="Vago" data-cost="3">Vago</option>
    <option value="Glotón" data-cost="3">Glotón</option>
    <option value="Sin reflejos" data-cost="6">Sin reflejos</option>
    <option value="Sin puntería" data-cost="6">Sin puntería</option>
    <option value="Torpe" data-cost="6">Torpe</option>
    <option value="Dócil" data-cost="6">Dócil</option>
    <option value="Honesto" data-cost="5">Honesto</option>
    <option value="Obstuto" data-cost="3">Obstuto</option>
    <option value="Mal oído" data-cost="4">Mal oído</option>
    <option value="Feo" data-cost="3">Feo</option>
    <option value="Estéril" data-cost="3">Estéril</option>
    <option value="Aprendizaje lento" data-cost="6">Aprendizaje lento</option>
    <option value="Testarudo" data-cost="4">Testarudo</option>
    <option value="Tartamudo" data-cost="3">Tartamudo</option>
    <option value="Disoluto" data-cost="3">Disoluto</option>
    <option value="Ceguera" data-cost="7">Ceguera</option>
    <option value="Enfermizo" data-cost="3">Enfermizo</option>
  </optgroup>
</select>
    <div class="puntosrasgos"><div class="col-six"><div class="titulopuntosrasgos">Puntos de Rasgos [PR]</div></div><div class="col-four"><div class="input-group">
<div class="col-rasgos"><p>
  <label for="positivos" name="positivos"></label>
  <input id="positivos" type="text" disabled="" name="positivos" class="alin" value="" placeholder="Positivos" /></p></div><div class="col-rasgos"><p><label for="negativos" name="negativos"></label>
  <input id="negativos" type="text" disabled="" name="negativos" class="alin" value="" placeholder="Negativos" /></p></div><div class="col-rasgos"><p>
  <label for="total" name="total"></label>
  <input id="total" type="text" disabled="" name="total" class="alin" 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><input name="generar "class="boton" type="button" onclick="generar()" target="_parent" value="Generar" /><div class="codee"><textarea rows="8" id="code"></textarea></div></form></div>
</form>

1
  • Buena respuesta, pero aún se pueden escoger rasgos antagónicos: Robusto y En los huesos. Saludos Commented el 22 abr. 2020 a las 10:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.