Código de JavaScript - Cargar valores en un select dependiendo de la seleccion en otro select

Imágen de perfil
Val: 2.170
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cargar valores en un select dependiendo de la seleccion en otro selectgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 6 de Marzo del 2013 por Xavi
81.653 visualizaciones desde el 6 de Marzo del 2013
Código que muestra como eliminar los valores de un select y cargar otros valores nuevos dependiendo de la selección en un select previo. Estos valores son cargados de un array de valores previamente definido.

Versión 1
estrellaestrellaestrellaestrellaestrella(5)

Publicado el 6 de Marzo del 2013gráfica de visualizaciones de la versión: Versión 1
81.660 visualizaciones desde el 6 de Marzo del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/**
 * Funcion que se ejecuta al seleccionar una opcion del primer select
 */
function cargarSelect2(valor)
{
    /**
     * Este array contiene los valores sel segundo select
     * Los valores del mismo son:
     *  - hace referencia al value del primer select. Es para saber que valores
     *  mostrar una vez se haya seleccionado una opcion del primer select
     *  - value que se asignara
     *  - testo que se asignara
     */
    var arrayValores=new Array(
        new Array(1,1,"opcion1-1"),
        new Array(1,2,"opcion1-2"),
        new Array(1,3,"opcion1-3"),
        new Array(2,1,"opcion2-1"),
        new Array(3,1,"opcion3-1"),
        new Array(3,2,"opcion3-2"),
        new Array(3,3,"opcion3-3"),
        new Array(3,4,"opcion3-4")
    );
    if(valor==0)
    {
        // desactivamos el segundo select
        document.getElementById("select2").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length=0;
 
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0]=new Option("Selecciona una opcion", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if(arrayValores[i][0]==valor)
            {
                document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }
 
        // habilitamos el segundo select
        document.getElementById("select2").disabled=false;
    }
}
 
/**
 * Una vez selecciona una valor del segundo selecte, obtenemos la información
 * de los dos selects y la mostramos
 */
function seleccinado_select2(value)
{
    var v1 = document.getElementById("select1");
    var valor1 = v1.options[v1.selectedIndex].value;
    var text1 = v1.options[v1.selectedIndex].text;
    var v2 = document.getElementById("select2");
    var valor2 = v2.options[v2.selectedIndex].value;
    var text2 = v2.options[v2.selectedIndex].text;
 
    alert("Se ha seleccionado el valor "+valor1+" ("+text1+") del primer select y el valor "+valor2+" ("+text2+") del segundo select");
}
</script>
</head>
 
<body>
</body>
<form>
    <p>
        <select id='select1' onchange='cargarSelect2(this.value);'>
            <option value='0'>Selecciona una opcion</option>
            <option value='1'>opcion 1</option>
            <option value='2'>opcion 2</option>
            <option value='3'>opcion 3</option>
        </select>
    </p>
 
    <p>
        <select id='select2' onchange='seleccinado_select2();' disabled>
            <option value='0'>Selecciona una opcion</option>
        </select>
    </p>
</form>
</html>



Comentarios sobre la versión: Versión 1 (5)

Macvajal
19 de Febrero del 2014
estrellaestrellaestrellaestrellaestrella
Muy bueno tu ejercicio me sirvio bastante, pero tengo un pequeño problema.

en mi caso el segundo select debe cargar 1 div, dependiendo la opcion que se toma.

por lo cual son 2 div y dependiendo la opcion que necesito cargue en el div 1 o en el div 2.
Responder
kedwin
31 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
13 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
hola, una pregunta, como cargo un select dependiendo del valor de una variable?, me explico, en un form busco a un cliente, guardo el ide en una variable, luego dependiendo de ese valor cargo la select con los nombres de los contactos asociados a ese cliente, sin refrescar claro esta
Responder
Lizbeth
21 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Muy buen ejemplo, gracias.
Responder
Lilia
14 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
hola, para hacerlo de tres niveles?
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2320
Revisar política de publicidad