Cargar valores en un select dependiendo dependiendo de la selección en otro select
Publicado por olivares (2 intervenciones) el 11/10/2016 23:30:56
Hola amigos, este código hace exactamente lo que describe el titulo del post y lo encontré en este mismo foro pero con dos años de antigüedad voy bastante flojo de javascript y me gustaría que me ayudaran sobre como podría colocar el elemento optgroup en el select a través del array del javascript:
Estos son los valores que aparecen en el segundo select según la opción seleccionada en el primer select
---------
Código completo
Gracias de antemano.
1
2
3
4
5
6
7
8
9
10
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")
);---------
Código completo
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>
Gracias de antemano.
Valora esta pregunta
0
