2

Cómo lograr que ocurra un “evento” cuando se elige una opción del select name="SistemasOperativos" y a partir de este select mostrar otra lista. es decir: name="ClasificacionWvista" , name="ClasificacionW7" o name="ClasificacionWXp"

<select name="SistemasOperativos" size=9 id="OS" >
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Windows Vista</option> 
       <option value="2">Windows 7</option> 
       <option value="3">Windows XP</option> 
   </optgroup> 

</select>


<select name="ClasificacionWvista" size=9 id="Vista">
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Windows Vista Starter</option> 
       <option value="2">Windows Vista Home Basic</option> 
       <option value="3">Windows Vista Home Premium</option>
       <option value="1">Windows Vista Business</option> 
       <option value="2">Windows Vista Ultimate</option> 
       <option value="3">Windows Vista Enterprise</option> 
   </optgroup> 
</select>

introducir la descripción de la imagen aquí

<select name="ClasificacionW7" size=9 id="W7">
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Starter</option> 
       <option value="2">Home Basic</option> 
       <option value="3">Professiona</option>
       <option value="2">Ultimate</option> 
       <option value="3">Enterprise</option> 
   </optgroup> 
</select>

introducir la descripción de la imagen aquí

<select name="ClasificacionWXp" size=9 id="Wxp">
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Windows XP Media Center</option> 
       <option value="2">Windows XP Tablet PC Edition</option> 
       <option value="3">Windows XP Starter</option>
       <option value="2">Windows XP Home Edition</option> 
       <option value="3">Windows XP Professional</option> 
   </optgroup> 
</select>

introducir la descripción de la imagen aquí

1
  • Falta algo de información: ¿cómo se va a cargar la segunda select? ¿qué has intentado hasta el momento y con qué fallos/dificultades te estás encontrando? Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 10 mar. 2018 a las 4:13

1 respuesta 1

1

Una de las tantas formas en que puedes hacer lo que requieres es mostrar/ocultar los grupos dependiendo el primer item seleccionado.

Ejemplo con JavaScript nativo:

var SistemasOperativos = document.querySelector("#SistemasOperativos");
var ClasificacionWvista = document.querySelector("#ClasificacionWvista");

SistemasOperativos.addEventListener('change', function(){
  var valor = this.value;
  
  var grupos = ClasificacionWvista.querySelector("optgroup");
  grupos.style.display = 'none';
  
  var grupo = document.querySelector("#grupo_" + valor);
  grupo.style.display = 'block';
})
#ClasificacionWvista optgroup{
  display: none
}
<select name="SistemasOperativos" id="SistemasOperativos" size=9 id="OS" >
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Windows Vista</option> 
       <option value="2">Windows 7</option> 
       <option value="3">Windows XP</option> 
   </optgroup> 

</select>


<select name="ClasificacionWvista" id="ClasificacionWvista" size=9 id="Vista">
   <option selected value="0"> Elige una opción </option>
     <optgroup label="Microsoft" id="grupo_1">
       <option value="1">Windows Vista Starter</option> 
       <option value="2">Windows Vista Home Basic</option> 
       <option value="3">Windows Vista Home Premium</option>
       <option value="1">Windows Vista Business</option> 
       <option value="2">Windows Vista Ultimate</option> 
       <option value="3">Windows Vista Enterprise</option> 
   </optgroup>
   <optgroup label="Microsoft" id="grupo_2"> 
       <option value="1">Starter</option> 
       <option value="2">Home Basic</option> 
       <option value="3">Professiona</option>
       <option value="2">Ultimate</option> 
       <option value="3">Enterprise</option> 
   </optgroup> 
</select>

Ejemplo con jQuery:

$(document).ready(function(){
  $("#SistemasOperativos").change(function(){
    var valor = $(this).val();
    
    $("#ClasificacionWvista optgroup").css('display', 'none');
    $("#grupo_" + valor).css('display', 'block');
  })
})
#ClasificacionWvista optgroup{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="SistemasOperativos" id="SistemasOperativos" size=9 id="OS" >
   <option selected value="0"> Elige una opción </option>
       <optgroup label="Microsoft"> 
       <option value="1">Windows Vista</option> 
       <option value="2">Windows 7</option> 
       <option value="3">Windows XP</option> 
   </optgroup> 

</select>


<select name="ClasificacionWvista" id="ClasificacionWvista" size=9 id="Vista">
   <option selected value="0"> Elige una opción </option>
     <optgroup label="Microsoft" id="grupo_1">
       <option value="1">Windows Vista Starter</option> 
       <option value="2">Windows Vista Home Basic</option> 
       <option value="3">Windows Vista Home Premium</option>
       <option value="1">Windows Vista Business</option> 
       <option value="2">Windows Vista Ultimate</option> 
       <option value="3">Windows Vista Enterprise</option> 
   </optgroup>
   <optgroup label="Microsoft" id="grupo_2"> 
       <option value="1">Starter</option> 
       <option value="2">Home Basic</option> 
       <option value="3">Professiona</option>
       <option value="2">Ultimate</option> 
       <option value="3">Enterprise</option> 
   </optgroup> 
</select>

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.