Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » select que dependa de otros dos select

JavaScript - select que dependa de otros dos select

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

select que dependa de otros dos select

Publicado por juan juan (2 intervenciones) el 22/07/2021 07:44:34
hola buenas noches
tengo un dilema. aún soy un poco novato y puede que sea algo sencillo, pero estaría necesitando un select que varíe los option según la que se escoja PERO dependiendo de otros dos option (de select diferentes). como no soy experto en código dejo un pequeño ejemplo con mis palabras por si no se entiende lo anterior

supongamos que tengo un select que me da carreras(MMO, IPP, EMC), otro que me da años(CUARTO, QUINTO, SEXTO Y SÉPTIMO) y un último que me da materias (las mismas varían según año y carrera)

si en la lista de carreras elijo MMO y en la de cursos elijo SEXTO AÑO, necesitaría que se despliegue el select con las materias(diferentes option) que hay en la carrera y año mencionados. PERO las materias de QUINTO AÑO en MMO NO son las mismas que en sexto. así mismo, las materias de SEXTO AÑO en EMC o IPP, siguen sin ser las mismas que de otros sextos. se entiende? no soy el mejor explicando o ejemplificando

hasta donde sé, esto es html y js pero me dicen si corresponde a otro foro
gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

select que dependa de otros dos select

Publicado por Alejandro (532 intervenciones) el 22/07/2021 17:05:56
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Te dejo un código algo repetitivo pero creo que esta bien para que se te facilite la comprensión.
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
<select id="lstCarrera"><select>
<select id="lstAnio"><select>
<select id="lstMatriz"><select>
 
<script>
	data = {
		'MMO':{
			'primero':[
				'MMO_1_1',
				'MMO_1_2'
			],
			'segundo':[
				'MMO_2_1',
				'MMO_2_2'
			],
		},
		'IPP':{
			'primero':[
				'IPP_1_1',
				'IPP_1_2'
			],
			'segundo':[
				'IPP_2_1',
				'IPP_2_2'
			],
		},
		'EMC':{
			'primero':[
				'EMC_1_1',
				'EMC_1_2'
			],
			'segundo':[
				'EMC_2_1',
				'EMC_2_2'
			],
		}
	}
	poblateCarrera();
 
	document.getElementById('lstCarrera').addEventListener('change', poblateAnio);
	document.getElementById('lstAnio').addEventListener('change', poblateMatriz);
 
	function poblateCarrera(){
		lstCarrera = document.getElementById('lstCarrera');
		lstCarrera.innerHTML='';
		for(key in data){
			opt = document.createElement('option');
			opt.value=key;
			opt.appendChild(document.createTextNode(key));
			lstCarrera.appendChild(opt);
		}
		poblateAnio();
	}
 
	function poblateAnio(){
		lstCarrera = document.getElementById('lstCarrera').value;
		lstAnio =  document.getElementById('lstAnio');
		lstAnio.innerHTML='';
		for(key in data[lstCarrera]){
			opt = document.createElement('option');
			opt.value=key;
			opt.appendChild(document.createTextNode(key));
			lstAnio.appendChild(opt);
		}
		poblateMatriz();
	}
 
	function poblateMatriz(){
		lstCarrera = document.getElementById('lstCarrera').value;
		lstAnio =  document.getElementById('lstAnio').value;
		lstMatriz = document.getElementById('lstMatriz');
		lstMatriz.innerHTML='';
		for(val of data[lstCarrera][lstAnio]){
			opt = document.createElement('option');
			opt.value=val;
			opt.appendChild(document.createTextNode(val));
			lstMatriz.appendChild(opt);
		}
	}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

select que dependa de otros dos select

Publicado por juan juan (2 intervenciones) el 22/07/2021 19:37:35
muchísimas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

select que dependa de otros dos select

Publicado por Davit (19 intervenciones) el 24/07/2021 15:50:00
Con intención de ayudar (y con la de aprender un poco yo también) he añadido un par de cosas al código de Alejandro, a la parte del html concretamente, con su permiso te lo comparto:

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
<script>
        data = {
            'MMO':{
                'primero':[
                    'MMO_1_1',
                    'MMO_1_2'
                ],
                'segundo':[
                    'MMO_2_1',
                    'MMO_2_2'
                ],
            },
            'IPP':{
                'primero':[
                    'IPP_1_1',
                    'IPP_1_2'
                ],
                'segundo':[
                    'IPP_2_1',
                    'IPP_2_2'
                ],
            },
            'EMC':{
                'primero':[
                    'EMC_1_1',
                    'EMC_1_2'
                ],
                'segundo':[
                    'EMC_2_1',
                    'EMC_2_2'
                ],
            }
        }
        poblateCarrera();
 
        document.getElementById('lstCarrera').addEventListener('change', poblateAnio);
        document.getElementById('lstAnio').addEventListener('change', poblateMatriz);
 
        function poblateCarrera(){
            lstCarrera = document.getElementById('lstCarrera');
            lstCarrera.innerHTML='';
            for(key in data){
 
                opt = document.createElement('option');
                opt.value=key;
                opt.appendChild(document.createTextNode(key));
                lstCarrera.appendChild(opt);
            }
            poblateAnio();
        }
 
        function poblateAnio(){
            lstCarrera = document.getElementById('lstCarrera').value;
            lstAnio =  document.getElementById('lstAnio');
            lstAnio.innerHTML='';
            for(key in data[lstCarrera]){
                opt = document.createElement('option');
                opt.value=key;
                opt.appendChild(document.createTextNode(key));
                lstAnio.appendChild(opt);
            }
            poblateMatriz();
        }
 
        function poblateMatriz(){
            lstCarrera = document.getElementById('lstCarrera').value;
            lstAnio =  document.getElementById('lstAnio').value;
            lstMatriz = document.getElementById('lstMatriz');
            lstMatriz.innerHTML='';
            for(val of data[lstCarrera][lstAnio]){
                opt = document.createElement('option');
                opt.value=val;
                opt.appendChild(document.createTextNode(val));
                lstMatriz.appendChild(opt);
            }
        }
    </script>
</head>
<body onload="poblateCarrera();">
    <select id="lstCarrera" onchange="poblateMatriz()"><select>
    <select id="lstAnio" onchange="poblateMatriz()"><select>
    <select id="lstMatriz"><select>
</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar