Events with drop-down lists

Question

Events with drop-down lists

Navigation

#1 by (1 votes)

2

How to make an "event" occur when you choose an option of select name="SistemasOperativos" and from this select show another list. that is: name="ClasificacionWvista" , name="ClasificacionW7" or 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>

<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>

<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>

javascript jquery html5 html-select

asked by Noel L 09.03.2018 в 23:24

source

1 answer

BDOO error with Persistence EclipseLink-4002 Database .NET Core Reverse Proxy

score 1 · Accepted Answer

One of the many ways in which you can do what you require is to show / hide the groups depending on the first selected item.

Example with native JavaScript:

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>

Example with 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>