Duplicar codigo javascript en un formulario

spaindvds · #1 (**permalink**) 26/01/2009, 06:16

Hola amigos tengo el siguiente problema y mi conocimiento en programacion es mas bien flojito.

resulta que me he encontrado con el siguiente javascript para formulario y la verdad es justo lo que nesesito pero no se como duplicarlo o que me funcione con otros campos de listas al mismo tiempo

<script language="JavaScript">

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(oCntrl){
while (oCntrl.length) oCntrl.remove(0);
switch (document.form.pais.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Ciudad de México", "0");
addOpt(oCntrl, 1, "Monterrey", "1");
addOpt(oCntrl, 2, "Guadalajara", "2");
break;
case 1:
addOpt(oCntrl, 0, "Madrid", "0");
addOpt(oCntrl, 1, "Barcelona", "1");
addOpt(oCntrl, 2, "San Sebastián", "2");
break;
case 2:
addOpt(oCntrl, 0, "Caracas", "0");
addOpt(oCntrl, 1, "Coro", "1");
addOpt(oCntrl, 2, "Maracay", "2");
addOpt(oCntrl, 3, "Valencia", "3");
break;
}
}
</script>

<form name="form">
<table border="0">
<tr>
<td>
Pais
</td>
<td>
<select name="pais" onChange="cambia(document.frm.ciudad)">
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td> 

</td>
<td>
Ciudad
</td>
<td>
<select name="ciudad">
<option value="0">Ciudad de México</option>
<option value="1">Monterrey</option>
<option value="2">Guadalajara</option>
</select>
</td>
</tr>
</table>
</form>

el javascript tiene para escojer en la primera lista entre diferentes paises y dependiendo de que pais escojas la siguiente lista muestra ciudades del pais escojido en la primera lista.

Bien pues lo que quiero ahora es añadirle abajo 4 lineas mas con las mismas dos listas pero que funcionen independientes, claro para ya me imagino que habra que cambiar los "name" en los select --select name="nombredelselect"---- de las siguientes lineas de listas y para eso he desidido llamarlos: pais_01 y ciudad_01, pais_02 y ciudad_02 y asi todos los select tendrian diferentes nombres

La verdad es que con el poco conocimiento que tengo al respecto no me sale y he provado con un monton de maneras diferentes. tengo ya un dolor de cabeza de provar y provar codigos que madre mia y los ojos se me van a salir de su sitio...

Alguien puede echarme una manita con esto? por favor.

quimfv · #2 (**permalink**) 26/01/2009, 06:53

He hecho algunos cambios que seguro que entenderas.... sino pregunta!

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
	oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Antes elige pais", "0");
break;
case 1:
addOpt(oCntrl, 0, "Ciudades de Mx", "0");
addOpt(oCntrl, 1, "Ciudad de México", "1");
addOpt(oCntrl, 2, "Monterrey", "2");
addOpt(oCntrl, 3, "Guadalajara", "3");
break;
case 2:
addOpt(oCntrl, 0, "Ciudades de Es", "0");
addOpt(oCntrl, 1, "Madrid", "1");
addOpt(oCntrl, 2, "Barcelona", "2");
addOpt(oCntrl, 3, "San Sebastián", "3");
break;
case 3:
addOpt(oCntrl, 0, "Ciudades de Vn", "0");
addOpt(oCntrl, 1, "Caracas", "1");
addOpt(oCntrl, 2, "Coro", "2");
addOpt(oCntrl, 3, "Maracay", "3");
addOpt(oCntrl, 4, "Valencia", "4");
break;
}
}
</script>
<body>



<form name="form">
<table border="0">
<tr>
<td>
Pais
</td>
<td>
<select name="pais" id="pais" onChange="cambia(this,'ciudad')">
<option value="0">Elige pais</option>
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td>&nbsp;

</td>
<td>
Ciudad
</td>
<td>
<select name="ciudad"  id="ciudad">
<option value="0">Antes elige pais</option>
</select>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>
Pais
</td>
<td>
<select name="pais2" id="pais2" onChange="cambia(this,'ciudad2')">
<option value="0">Elige pais</option>
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td>&nbsp;

</td>
<td>
Ciudad
</td>
<td>
<select name="ciudad2"  id="ciudad2">
<option value="0">Antes elige pais</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Nunca dupliques codigo haz que con los parametros que le pases sepa donde actuar...

Quim

spaindvds · #3 (**permalink**) 26/01/2009, 08:36

GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS Quimfv.....

Mil gracias, no se como puedo agradecertelo. Era justo lo que nesesitaba para poder continuar aun no he terminado pero de momento funciona de maravilla.

Ya me imaginaba que seria cambiando algo en los parametros del javascript pero yo no se nada de progamacion lo justo para copiar pegar y cambiar cosas cuando son muy obvias.

Gracias de nuevo, me has quitado un gran peso de encima y si puedo hacer algo por ti me lo dices.

spaindvds · #4 (**permalink**) 26/01/2009, 08:37

Ademas seguro estoy de que este codigo le servira a un monton de gente mas...