Hola amigos:
Estoy tratando de asociar 3 select y encontré un código que está my bueno pero el problema es que no muestra las diferentes opciones del último select. El problema que veo es que la función del tercer select solo considera una de las opciones. Esto funciona del 1ero para el 2do pues solo hay una opción para cada cambio, pero del 2do para el 3ero son varias opciones, por ejemplo:
fila2= new Array();
fila2[0]="";
fila2[1]="Primero";
fila2[2]="Segundo";
En este caso hay que mostrar en el 3er select opciones para Primero y opciones para Segundo.
otro ej:
fila3= new Array();
fila3[0]="";
fila3[1]="Primero";
fila3[2]="Segundo";
fila3[3]="Tercero";
Hay que mostrar en el 3er select opciones para Primero, opciones para Segundo y opciones para Tercero
No se si esto se resuelve con alguna alternativa de clave/valor. No sé como hacerlo. Este es el código completo, por favor si me pueden ayudar se los agradezco:
<HTML>
<HEAD>
<TITLE> Asignaturas </TITLE>
<SCRIPT language='JavaScript'>
// Valores posibles del 1er select
valores1= new Array();
valores1[0]="";
valores1[1]="Automatica";
valores1[2]="Electricidad";
valores1[3]="Electronica";
valores1[4]="Informatica de Gestion";
valores1[5]="Informatica de Sistemas";
valores1[6]="Mecanica";
// Valores posibles del 2do select
fila1= new Array();
fila1[0]="";
// Valores asociado a la 1era opción del 1er select (Automatica)
fila2= new Array();
fila2[0]="";
fila2[1]="Primero";
fila2[2]="Segundo";
// Valores asociado a la 2da opción del 1er select (Electricidad)
fila3= new Array();
fila3[0]="";
fila3[1]="Primero";
fila3[2]="Segundo";
fila3[3]="Tercero";
// Valores asociado a la 3ra opción del 1er select (Electronica)
fila4= new Array();
fila4[0]="";
fila4[1]="Primero";
fila4[2]="Segundo";
fila4[3]="Tercero";
// Valores asociado a la 4ta opción del 1er select (Informatica de gestion)
fila5= new Array();
fila5[0]="";
fila5[1]="Primero";
fila5[2]="Segundo";
fila5[3]="Tercero";
// Valores asociado a la 5ta opción del 1er select (Informatica de Sistemas)
fila6= new Array();
fila6[0]="";
fila6[1]="Primero";
fila6[2]="Segundo";
fila6[3]="Tercero";
// Valores asociado a la 6ta opción del 1er select (Mecanica)
fila7= new Array();
fila7[0]="";
fila7[1]="Primero";
fila7[2]="Segundo";
fila7[3]="Tercero";
// valores posibles del 3er select
columna1= new Array();
columna1[0]="";
columna2= new Array();
columna2[0]="";
columna2[1]="Electricidad y electronica";
columna2[2]="Maquinas electricas";
columna2[3]="Electronica industrial";
columna2[4]="Ingenieria de control";
columna2[5]="Modelado y simulacion";
columna2[6]="Optimizacion y contol";
columna2[7]="Sistemas electronicos digitales";
columna2[8]="Sistemas mecanicos";
columna2[9]="Ingles tecnico";
columna2[10]="Interface hombre maquina";
columna2[11]="Arquitectura de computadores";
columna2[12]="Programacion cientifica";
columna3= new Array();
columna3[0]="Control y programacion de robors";
columna3[1]="Ingenieria de control II";
columna3[2]="Proyectos";
columna3[3]="Sistemas de percepcion";
columna3[4]="Sistemas de produccion integrados";
columna3[5]="Sistemas informaticos en tiempo real";
columna3[6]="Aplicaciones de la electronica de potencia";
columna3[7]="Seguridad en robotica y automatica";
columna3[8]="Proyecto fin de carrera";
columna4= new Array();
columna4[0]="Electrometria";
columna4[1]="Expresion grafica";
columna4[2]="Fundamentos de informatica";
columna4[3]="Fundamentos fisicos de la infenieria";
columna4[4]="Fundamentos matematicos ingenieria";
columna4[5]="Matematicas I";
columna4[6]="Matematicas II";
columna4[7]="Metodos estadisitcos de la ingenieria";
columna4[8]="Fundamentos de ingenieria";
columna4[9]="Fundamentos de quimica";
columna5= new Array();
columna5[0]="";
columna5[1]="Centrales electricas";
columna5[2]="Centrales electricas I";
columna5[3]="Circuitos";
columna5[4]="Electronica industrial";
columna5[5]="Maquinas electricas";
columna5[6]="Maquinas electricas I";
columna5[7]="Materiales electricos y estructuras";
columna5[8]="Teoria de macnismos y estructuras";
columna5[9]="Instalaciones electricas";
columna5[10]="Teoria de computadores";
columna6= new Array();
columna6[0]="";
columna6[1]="Administracion de empresas";
columna6[2]="Centrales electricas II";
columna6[3]="Maquinas electricas II";
columna6[4]="Oficina tecnica";
columna6[5]="Regulacion automaticas";
columna6[6]="Proyecto";
columna6[7]="Transporte de energia electrica";
columna6[8]="Instalaciones electricas";
columna6[9]="Seguridad e higiene en el trabajo";
// FIN DEL MODIFICADO
// Array de filas de opciones
valores2= new Array();
valores2[0]=fila1;
valores2[1]=fila2;
valores2[2]=fila3;
valores2[3]=fila4;
valores2[4]=fila5;
valores2[5]=fila6;
valores2[6]=fila7;
// UNIMOS EL 3ER SELECT
valores3= new Array();
valores3[0]=columna1;
valores3[1]=columna2;
valores3[2]=columna3;
valores3[3]=columna4;
valores3[4]=columna5;
valores3[5]=columna6;
valores3[6]=columna7;
valores3[7]=columna8;
valores3[8]=columna9;
// Escribe el código HTML correspondiente a las opciones del Select1
function escribeopcionesselect(valores1)
{
for (var i=0;i<valores1.length;i++)
{
window.document.write('<OPTION VALUE="'+valores1[i]+'">'+
valores1[i]+'</OPTION>');
}
}
// Escribe el código HTML correspondiente a las opciones del Select2
function escribeopcionesselect2(indice,valores2)
{
escribeopcionesselect(valores2[indice]);
}
// Escribe el código HTML correspondiente a las opciones del Select3
function escribeopcionesselect3(indice,valores3)
{
escribeopcionesselect(valores3[indice]);
}
// Actualiza las opciones del 2do Select en función del 1ero
function cambiaselect2(form,nombreo,nombred,valores2)
{
// Obtención del índice activo en el 1er select
var cadena="form."+nombreo+".selectedIndex";
var indice=eval(cadena);
// Obtención del objeto que representa al 2do select
var aux='form.'+nombred;
objeto=eval(aux);
// Actualización de las opciones posibles del 2do select
objeto.length=valores2[indice].length;
for (var i=0; i<valores2[indice].length;i++)
{
objeto.options[i].text=valores2[indice][i];
objeto.options[i].value=valores2[indice][i];
}
// Se activa la primera opción del 2do select
objeto.selectedIndex=0;
}
// Actualiza las opciones del 3er Select en función del 2do
function cambiaselect3(form,nombreo,nombred,valores3)
{
// Obtención del índice activo en el 2do select
var cadena="form."+nombreo+".selectedIndex";
var indice=eval(cadena);
// Obtención del objeto que representa al 3er select
var aux='form.'+nombred;
objeto=eval(aux);
// Actualización de las opciones posibles del 3er select
objeto.length=valores3[indice].length;
for (var i=0; i<valores3[indice].length;i++)
{
objeto.options[i].text=valores3[indice][i];
objeto.options[i].value=valores3[indice][i];
}
// Se activa la primera opción del 3er select
objeto.selectedIndex=0;
}
</SCRIPT>
<style TYPE="text/css">
.topictitle { font-weight: bold; font-size: 14px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #006699; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
A.link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: bold;
text-decoration: none; color: #0099CC; }
A:hover.link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: bold;
color: #FFCC66; text-decoration: underline; }
</style>
</HEAD>
<!--
-->
<BODY bgcolor="#FFEA7A">
<font face='courier' size='6' color='#7f0407'><P align=center>DATOS DE LA ASIGNATURA</P></font>
<FORM action='g.html' method='get' name='asig' onLoad='document.asig.titulacion.focus();'>
<TABLE cellspacing=4 cellspading=4 align=center width=90% >
<tr><td><font face='courier' color='#7f0407'>Titulación : </font></td>
<td><SELECT NAME="titulacion" onChange="cambiaselect2(form,'titulacion','curso', valores2)">
<SCRIPT language="JavaScript">escribeopcionesselect(valore s1)</SCRIPT>
</SELECT>
</td>
</tr>
<tr><td><font face='courier' color='#7f0407'>Curso : </font></td>
<td><SELECT NAME="curso" onChange="cambiaselect3(form,'curso','nombrea',val ores3)">
<SCRIPT language="JavaScript">escribeopcionesselect2(0,val ores2)</SCRIPT>
</SELECT>
</td>
</tr>
<tr><td> <font face='courier' color='#7f0407'>Nombre de la asignatura: </font></td>
<td><SELECT NAME="nombrea">
<SCRIPT language="JavaScript">escribeopcionesselect3(0,val ores3)</SCRIPT>
</SELECT>
</td>
</tr>
<tr></tr>
<tr><td></td>
<td><INPUT type=submit value='Siguiente'>
<INPUT type=reset value='Borrar'></td>
</tr>
</TABLE>
</FORM>
</BODY>
<HTML>
