select dinamico javascript - HTML

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. 
*/

Autor: Web322

Publicado: 21/07/2021

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario