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

Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 06 de Marzo del 2013 por Xavi
51.400 visualizaciones desde el 06 de Marzo del 2013. Una media de 266 por semana
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(2)

Publicado el 06 de Marzo del 2013gráfica de visualizaciones de la versión: Versión 1
51.402 visualizaciones desde el 06 de Marzo del 2013. Una media de 266 por semana
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 (2)

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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2320