0

Muy buenas tengo un formulario en el que tengo un select en el que se pide el numero de niños (hasta 4) y debajo necesito poner otro select en el que se requiera la edad del niño (hasta doce años) pero necesito que en base a los niños que se seleccionen aparezcan el mismo número de selects para seleccionar la edad. Si son dos niños dos selects de edad y si son cuatro cuatro. ¿Cómo podría hacerlo? Gracias.

      <select name="niños">
            <option value="1" id= "1">1</option>
            <option value="2" id= "2" selected>2</option>
            <option value="3" id= "3">3</option>
            <option value="4" id= "4">4</option>
        </select>
        EDADES NIÑOS 
        <select id="edad">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>

2 respuestas 2

1

Esta pregunta tiene varias respuestas posibles, además, expandiré la respuesta con una valoración personal si me permites. También asumo que estás usando un navegador actualizado que soporta las nuevas funcionalidades de la última versión de Javascript, ES6

La primera solución, y la más fácil, sería hacer tantos selects de edad como quieras (en este caso serían solo 4) y ocultarlos o mostrarlos en función del primer select.

const numberKids = document.getElementById("numberKids");
numberKids.addEventListener('change', function(element) {
	const option = element.target.value;
  let allAges = [...document.getElementsByClassName("edad")];
  const toShow = allAges.splice(0, option);
  toShow.map(function(shown) {
  	shown.classList.remove('oculto');
  });
  allAges.map(function(hidden) {
  	hidden.classList.add('oculto');
  })
});
.oculto {
  display: none;
}
      <select id="numberKids" name="niños">
            <option value="1" id= "1">1</option>
            <option value="2" id= "2" selected>2</option>
            <option value="3" id= "3">3</option>
            <option value="4" id= "4">4</option>
        </select>
        EDADES NIÑOS 
        <select id="edad1" class="edad oculto">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select id="edad2" class="edad oculto">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select id="edad3" class="edad oculto">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select id="edad4" class="edad oculto">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>

Pero claramente, estamos repitiendo lo mismo varias veces (el mismo select de edad) así que lo mejor será añadirlos y eliminarlos dinámicamente.

const numberKids = document.getElementById("numberKids");
numberKids.addEventListener('change', function(element) {
	const edadSelect = ` 
        <select>
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
 `;
 	let padre = document.getElementById("contenedorEdades");
  
	const option = element.target.value;
  padre.innerHTML = "";
  for(let i=0;i<option;++i) {
  	padre.innerHTML += edadSelect;	
  }
});
  <select id="numberKids" name="niños">
    <option value="1" id= "1">1</option>
    <option value="2" id= "2" selected>2</option>
    <option value="3" id= "3">3</option>
    <option value="4" id= "4">4</option>
  </select>
  EDADES NIÑOS
  <div id="contenedorEdades">
    
  </div>

Y como ves, hay bastantes posibilidades de llegar al mismo objetivo de varias maneras, pero yo, personalmente, no me decantaría por selects (por ser una mala decisión de diseño) si no, por un input con máximos y mínimos. Además, el código se reduce bastante.

const kidsEl = document.getElementById("kids");
kidsEl.addEventListener('change', function(element) {
	const edadEl = `<input type="number" min="0" max="12">`;
 	let padre = document.getElementById("edadesWrapper");
	const option = element.target.value;
  padre.innerHTML = "";
  for(let i=0;i<option;++i) {
  	padre.innerHTML += edadEl;	
  }
});
<input min="1" max="4" type="number" step="1" id="kids">
EDADES NIÑOS
<div id="edadesWrapper">
</div>

0
0

Que tal amigo, puedes intentar esta solución, espero te sirva.

//Se asocia evento 'change' para que ejecute una función cada vez que seleccione una opción en el primer select
$('body').on('change','select[name="ninos"]', function (e){
  //Capturamos y guardamos el valor de la opción seleccionada
  let valueSelected = $(this).val();
  
  //Limpiamos el contenedor 'div' para que se reinicien los selects creados dinámicamente
  $('.jsContainerSelects').html('');
  
  alert(valueSelected);
  
  //Aquí hacemos las respectivas comparaciones según la cantidad de niños seleccionados
  //Ejecutamos la función 'createSelects()' que devuelve la cantidad de selects que necesitamos
  if (valueSelected == 1){    
    createSelects(valueSelected);      
  }
  else if (valueSelected == 2){
    createSelects(valueSelected);      
  }
  if (valueSelected == 3){
    createSelects(valueSelected);     
  }
  else if (valueSelected == 4){
    createSelects(valueSelected);
  }
  
  /**
  *Función que se encarga de renderizar en el HTML los selects que necesitamos
  *@Parámetro: Recibe como parámetro el numero de veces que se debe crear el select
  **/
  function createSelects(numberToCreate){
    //Creamos ciclo en el que cada iteración será la cantidad de select que necesitamos
    for(var i = 1; i<= numberToCreate; i++){    
        var selectElement = 
          '<select id="edad">'+
                '<option value="0" selected>0</option>'+
                '<option value="1">1</option>'+
                '<option value="2">2</option>'+
                '<option value="3">3</option>'+
                '<option value="4">4</option>'+
                '<option value="5">5</option>'+
                '<option value="6">6</option>'+
                '<option value="7">7</option>'+
                '<option value="8">8</option>'+
                '<option value="9">9</option>'+
                '<option value="10">10</option>'+
                '<option value="11">11</option>'+
                '<option value="12">12</option>'+
            '</select>';
            
            //Reenderizamos y cargamos al contenedor 'div' los selects obtenidos
            $('.jsContainerSelects').append(selectElement);
      }
  
  }
  
  
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ninos">
            <option value="1" id= "1">1</option>
            <option value="2" id= "2" selected>2</option>
            <option value="3" id= "3">3</option>
            <option value="4" id= "4">4</option>
        </select>
        Edades
        
        <div class='jsContainerSelects'>
        
        </div>

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.