HTML
<form name="formulario1" action="#">
<select class="seleccion" name="cosa" onchange="cambia()">
<option value="0">Seleccione
<option value="1">Juegos
<option value="2">Hardware
<option value="3">Software
<option value="4">Marcas
</select>
<select class="seleccion" name="opt">
<option value="-">-
</select>
</form>CSS
.seleccion{
border:3px solid #58ACFA;
background-color:#2ECCFA;
color:white;
font-size:17px;
width:150px;
height:35px;
}JS
//1) Definir las Variables Correspodientes
var opt_1 = new Array ("-","Doom","Forza","DOTA2","...");
var opt_2 = new Array ("-","Disco Duro","SSD","CPU","...");
var opt_3 = new Array ("-","Google Chrome","Linux","Opera","...");
var opt_4 = new Array ("-","MSI","ASUS","GIGABYTE","...");
//2) Crear una function que permita el cambio dinámico
function cambia(){
var cosa;
//Se toma el valor de la "cosa seleccionada"
cosa = document.formulario1.cosa[document.formulario1.cosa.selectedIndex].value;
//Se chequea si la "cosa" está definida
if(cosa!=0){
//Seleccionamos la cosas correctas
mis_opts = eval("opt_" + cosa);
//se calcula el número de cosas
num_opts = mis_opts.length;
//marco el num de opt en el select
document.formulario1.opt.length = num_opts;
//para cada opt del array,la pongo en el select
for(i=0;i<num_opts;i++){
document.formulario1.opt.options[i].value = mis_opts[i];
document.formulario1.opt.options[i].text = mis_opts[i];
}
}else{
//si no habia ninguna opt seleccionada ,elimino las cosas del select
document.formulario1.opt.length = 1;
//podemos un guion en la única opt que he dejado
document.formulario1.opt.options[0].value = "-";
document.formulario1.opt.options[0].text = "-";
}
//hacer un reset de las opts
document.formulario1.opt.options[0].selected = true;
}
/*
Fuente: https://www.youtube.com/watch?v=34-SUNmhIOU
- Todos los créditos a su autor
- Nota : Se ordenó el código para que se vea mas legible para el público.
*/
Deja tu comentario