Asociar select

Quisiera saber se asocian tres select con javascript se como se asocian dos pero con tres no me sale.
Gracias

1 respuesta

Respuesta
1
No bien que querés decir con asociar, pero si me ponés el código o un ejemplo (preferiblemente el código) te puedo dar una mano.
Atentamente. Manuel Fernández.
Aquí te mando el código. Lo que quiero hacer es que dependiendo de la opción elegida en el primer y segundo select me salgan unas opciones u otras en el tercero
Gracias
<HTML>
<HEAD>
<TITLE> Asignaturas </TITLE>
<SCRIPT language='JavaScript'>
// Valores posibles del primer 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 segundo select
fila1= new Array();
fila1[0]="";
// Valores asociado a la primera opción del primer select (Automatica)
fila2= new Array();
fila2[0]="";
fila2[1]="Primero";
fila2[2]="Segundo";
// Valores asociado a la segunda opción del primer select (Electricidad)
fila3= new Array();
fila3[0]="";
fila3[1]="Primero";
fila3[2]="Segundo";
fila3[3]="Tercero";
// Valores asociado a la tercera opción del primer select (Electronica)
fila4= new Array();
fila4[0]="";
fila4[1]="Primero";
fila4[2]="Segundo";
fila4[3]="Tercero";
// Valores asociado a la cuarta opción del primer select (Informatica de gestion)
fila5= new Array();
fila5[0]="";
fila5[1]="Primero";
fila5[2]="Segundo";
fila5[3]="Tercero";
// Valores asociado a la quinta opción del primer select (Informatica de Sistemas)
fila6= new Array();
fila6[0]="";
fila6[1]="Primero";
fila6[2]="Segundo";
fila6[3]="Tercero";
// Valores asociado a la sexta opción del primer select (Mecanica)
fila7= new Array();
fila7[0]="";
fila7[1]="Primero";
fila7[2]="Segundo";
fila7[3]="Tercero";
// valores posibles del tercer select
columna1= new Array();
columna1[0]="";
columna2= new Array();
columna2[0]="";
columna2[1]="Electricidad y electronica industrial";
columna2[2]="Maquinas electricas";
columna2[3]="Electronica industrial";
columna2[4]="Ingenieria de control";
columna2[5]="Modelado y simulacion e sistemas dinamicos";
columna2[6]="Optimizacion y contol optimo";
columna2[7]="Sistemas electronicos digitales";
columna2[8]="Sistemas mecanicos";
columna2[9]="Ingles tecnico";
columna2[10]="Interface hombre maquina";
columna2[11]="Organizacion y 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 industriales 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 de la ingenieria";
columna4[5]="Matematicas I";
columna4[6]="Matematicas II";
columna4[7]="Metodos estadisitcos de la ingenieria";
columna4[8]="Fundamentos de ingenieria eeletrica";
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 y organizacion de la produccion";
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 TERCER 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+'">'+
valores1+'</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 segundo Select en función del primero
function cambiaselect2(form,nombreo,nombred,valores2)
{
// Obtención del índice activo en el primer select
var cadena="form."+nombreo+".selectedIndex";
var indice=eval(cadena);
// Obtención del objeto que representa al segundo select
var aux='form.'+nombred;
objeto=eval(aux);
// Actualización de las opciones posibles del segundo select
objeto.length=valores2[indice].length;
for (var i=0; i<valores2[indice].length;i++)
{
objeto.options.text=valores2[indice];
objeto.options.value=valores2[indice];
}
// Se activa la primera opción del segundo select
objeto.selectedIndex=0;
}
// Actualiza las opciones del tercer Select en función del segundo
function cambiaselect3(form,nombreo,nombred,valores3)
{
// Obtención del índice activo en el segundo select
var cadena="form."+nombreo+".selectedIndex";
var indice=eval(cadena);
// Obtención del objeto que representa al tercer select
var aux='form.'+nombred;
objeto=eval(aux);
// Actualización de las opciones posibles del tercer select
objeto.length=valores3[indice].length;
for (var i=0; i<valores3[indice].length;i++)
{
objeto.options.text=valores3[indice];
objeto.options.value=valores3[indice];
}
// Se activa la primera opción del tercer 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>
<!--
así se escriben los comentarios
el head se utiliza para declarar las funciones de javascript y para poner el
title
-->
<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(valores1)</SCRIPT>
</SELECT>
</td>
</tr>
<tr><td><font face='courier' color='#7f0407'>Curso : </font></td>
<td><SELECT NAME="curso" onChange="cambiaselect3(form,'curso','nombrea',valores3)">
<SCRIPT language="JavaScript">escribeopcionesselect2(0,valores2)</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,valores3)</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>
Estuve probando el código que me enviaste y lo más extraño es que me funciona perfectamente a pesar de que aparezca en el explorador el ícono de que hay errores, y sigue funcionando las veces que cambie.
La verdad no veo ningún problema en el código, de todas formas, si este camino se te hace difícil podes recurrir a utilizar capas para simular el cambio en el select, básicamente haces invisible el select y mostrás otro en su lugar con otras variables.
La diferencia entre los select's es que tienen el mismo nombre pero distinto Id.
En fin, si te interesa esto último decime que te lo explico más a fondo; pero te repito que probé el código y funciona perfectamente.
Atentamente. Manuel Fernández.
El problema es que elijas la opción que elijas en el primer select la opción del segundo si es primero siempre sale lo mismo en el tercer y eso no tendría que ser así.
Si puedes explicarme eso de la capas que no se como se hace.
Gracias
En realidad esto de las capas es una mezcla entere javascript y css.
Consiste en tenrs todos los selects creados, pero ir haciendo visibles según la elección a los que corresponden e invisibles a los que no.
Se les da el misom nombre a los que corresponde para que al recuperar las variables no haya problema, y se les da un id distinto a cada uno para poder controlarlos libremente.
Por ejemplo, suponiendo que quieras armar un formulario en el que el primer select tenga las opciones: Jardín, Priamria y Secundaria
Y que el segundo (correspondiente a Jardín tenga las opciones Sala de 2, Sala de 3, Sala de 4, Preescolar).
Y que el segundo (correspondiente a Primaria tenga las opciones 1, 2, 3, 4, 5 ,6 ,7).
Y que el segundo (correspondiente a Secundaria tenga las opciones 1 año, 2 año, 3 año, 4 año, 5 año).
Entonces:
<script language="javascript">
function CambioServicio(valor,i){
if (i==1){
switch (document.form1.elements[valor].value){
case "jardin": document.form1.n11.style.visibility="visible"
document.form1.n21.style.visibility="hidden"
document.form1.n31.style.visibility="hidden"
break;
case "primaria": document.form1.n21.style.visibility="visible"
document.form1.n21.style.top= document.form1.n11.style.top + document.form1.n11.style.height
document.form1.n11.style.visibility="hidden"
document.form1.n31.style.visibility="hidden"
break;
case "secundaria": document.form1.n31.style.visibility="visible"
document.form1.n31.style.top= document.form1.n11.style.top + document.form1.n11.style.height
document.form1.n21.style.visibility="hidden"
document.form1.n11.style.visibility="hidden"
break;
}
}else{
switch(document.form1.elements[valor].value){
case "jardin": document.form1.n12.style.visibility="visible"
document.form1.n22.style.visibility="hidden"
document.form1.n32.style.visibility="hidden"
break;
case "primaria": document.form1.n22.style.visibility="visible"
document.form1.n22.style.top= document.form1.n12.style.top + document.form1.n12.style.height
document.form1.n32.style.visibility="hidden"
document.form1.n12.style.visibility="hidden"
break;
case "secundaria": document.form1.n32.style.visibility="visible"
document.form1.n32.style.top= document.form1.n12.style.top + document.form1.n12.style.height
document.form1.n22.style.visibility="hidden"
document.form1.n12.style.visibility="hidden"
break;
}
}
</script>
<select name="division" size="1" style="top: 327px; left:9px;" onChange="CambioServicio(1,1)">
<option value="jardin" SELECTED>Jardín
<option value="primaria">Primaria
<option value="secundaria">Secundaria
</select>
</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> Nivel a cursar:
<select ID="n11" size="1">
<option value="2" SELECTED>sala de 2</option>
<option value="3">sala de 3</option>
<option value="4">sala de 4</option>
<option value="5">preescolar</option>
</select>
<select id="n31" size="1" style="visibility:hidden; position:absolute; left: 110px; top: 597px" name="select">
<option value="1"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">1
año</font></option>
<option value="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">2
año </font></option>
<option value="3"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">3
año</font></option>
<option value="4"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">4
año</font></option>
<option value="5"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">5
año </font></option>
</select>
<select id="n21" size="1" style="visibility:hidden; position:absolute; top: 591px; left: 109px" name="select3">
<option value="1"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">1
grado</font></option>
<option value="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">2
grado</font></option>
<option value="3"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">3
grado</font></option>
<option value="4"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">4
grado</font></option>
<option value="5"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">5
grado</font></option>
<option value="6"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">6
grado</font></option>
<option value="7"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">7
grado</font></option>
</select>
</font></p>
<select name="cursadod" size="1" style="visibility:visible; top: 382px; left:9px" onChange="CambioServicio(5,2)">
<option value="jardin" SELECTED>Jardín
<option value="primaria">Primaria
<option value="secundaria">Secundaria
</select>
</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Último
nivel cursado:
<select ID="n12" size="1">
<option value="2" SELECTED>sala de 2</option>
<option value="3">sala de 3</option>
<option value="4">sala de 4</option>
<option value="5">preescolar</option>
</select>
<select id="n22" size="1" style="visibility:hidden; position:absolute; left: 153px; top: 647px" name="select2">
<option value="1"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">1
grado</font></option>
<option value="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">2
grado</font></option>
<option value="3"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">3
grado</font></option>
<option value="4"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">4
grado</font></option>
<option value="5"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">5
grado</font></option>
<option value="6"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">6
grado</font></option>
<option value="7"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">7
grado</font></option>
</select>
<select ID="n32" size="1" style="visibility:hidden; position:absolute; left:153px; top:647px; ">
<option value="1">1 año</option>
<option value="2">2 año</option>
<option value="3">3 año</option>
<option value="4">4 año</option>
<option value="5">5 año</option>
</select>
</font></p>
Por cierto, en este formulario interactúan 8 selects, 2 están fijos y 6 son dinámicamente presentados.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Calcular Mantenimiento preventivo de automóvil

Antes que nada hola a todos!. Bueno hoy tengo un pequeño problema a resolver con un programa que se me solicito desarrollar en php. Por ejemplo a cada automóvil se le debe realizar mantenimiento a los 10, 000 Km. Y mandar una notificación o alerta de...
3 respuestas

Mover foco en registros de un formulario

Estaría interesado en saber que evento he de realizar para que en un formulario, le de doble clic a un campo y que se vaya a otro con el mismo número o código. Ejemplo de la imagen, si en el campo “recicladopor” doy doble clic en el registro con...
3 respuestas

Cómo puedo hacer para que me imprima 4 formularios en diferentes ficheros php en un solo botón imprimir

Ayudaaaaaaaaaaaaa se me hace muy difícil hacer esto, no encuentro
1 respuesta

Como contar like y seguidores de redes sociales

Ojala se encuentren todo muy bien, les escribo esta vez por que desea contabilizar los like de una fan page de facebook, los seguidores en twitter, los suscriptores en google plus y youtube. Ya tengo como contar los de face, pero no encuentro...
2 respuestas

Encontrar la página index.html

Estoy empezando con programación en html, css y js, fundamentalmente para poderme corregir la web que tengo que está bastante mal. Cuando voy al inspector en mi web, encuentro en la página de inicio que pone "Indice" pero soy incapaz de encontrar esa...
1 respuesta

Es posible utilizar la página desde el navegador Opera

Utilizo la consulta para comentar que aquellas personas que para responder o publicar consultas tengan problemas con Firefox o Chrome, (soy una de ellas), pueden utilizar el navegador Opera, con el sí es posible responder mensajes y abrir temas....
2 respuestas

Detectar el modo oscuro al abrir una página y luego cambiar según preferencia del usuario

Tengo una web en la que mediante hacer click en un botón cambia entre modo dark y light llamando a una función js siguiente: const setTheme = (theme) => { document.documentElement.className=theme; localStorage.setItem('theme', theme); } const...
1 respuesta

Agregar / eliminar elementos con javascript

Tengo una lista de elementos que se deben filtrar conforme se va escribiendo en un campo de texto, en caso de que no aparezca en la lista filtrada que los pueda añadir, y en caso que si aparezca añadirlo por medio de doble click, Ya tengo la parte...
2 respuestas

Como se multiplica a partir de un texto?

En EXCEL, quiero que en la celda A1 se multiplique automáticamente el 4% del valor que aparece en la celda B1, esto cuando la celda C1 contenga la palabra FACTURA.
2 respuestas

Soy nuevo en programador web ¿Cómo hago esto?

Es algo difícil de preguntar para mi, vean la imagen, donde dice todo expertos, cuando lo presionamos, nos lleva a la página principal, ¿Cierto?, ese mismo efecto me gustaría tener en mi página web, pero hasta ahora no pillo respuestas en la web, te...
3 respuestas