listas dependientes con array

chalchis · #1 (**permalink**) 24/02/2006, 17:11

hola amigos tengo un problema quiero llenar una lista dependiendo de la otra, se como como hacerlo pero si solo tuviera dos select como le haria se tuviera mas selects independientemente de los otro dos es decir que cada select padre controle su select hijo

como podria yo hacer eso??

<html>
<head>
<script language="JavaScript">

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

function cambia(oCntrl){
tuSelect=document.getElementById("ciudad");
tuSelect.length=0;
switch (document.frm.pais.selectedIndex){
case 1:
addOpt(oCntrl, 0, "Ciudad de México", "http://www.mexico.com");
addOpt(oCntrl, 1, "Monterrey", "http://www.monterrey.com");
addOpt(oCntrl, 2, "Guadalajara", "http://www.guadalajara.com");
break;
case 2:
addOpt(oCntrl, 0, "Madrid", "http://www.madrid.com");
addOpt(oCntrl, 1, "Barcelona", "http://www.barcelona.com");
addOpt(oCntrl, 2, "San Sebastián", "http://www.sansebastian.com");
addOpt(oCntrl, 3, "veracruz", "veracruz");

break;
case 3:
addOpt(oCntrl, 0, "Caracas", "http://www.caracas.com");
break;
}
}
</script>
</head>
<body>

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

</td>
<td width="44">
Ciudad
</td>
<td width="296">
<select name="ciudad" >
</select> </td>
</tr>
<tr>
<td>Pais</td>
<td><select name="pais[]" id="pais" onchange="cambia(document.frm.ciudad)">
<option value=""></option>
<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[]" id="ciudad" >
</select></td>
</tr>
<tr>
<td>Pais</td>
<td><select name="select" id="select" onchange="cambia(document.frm.ciudad)">
<option value=""></option>
<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="select2" id="select2" >
</select></td>
</tr>
</table>
</form>
</body>
</html>

espero sus comentarios
saludos

Cap.Buscapina · #2 (**permalink**) 24/02/2006, 18:38

probalo:

Cita:

<html>
<head>
<script language="JavaScript">

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

function cambia(oCntrl,origen){
for(x=oCntrl.length;x>-1;x--){oCntrl.options[x]=null;}
switch (origen.selectedIndex){
case 1:
addOpt(oCntrl, 0, "Ciudad de México", "http://www.mexico.com");
addOpt(oCntrl, 1, "Monterrey", "http://www.monterrey.com");
addOpt(oCntrl, 2, "Guadalajara", "http://www.guadalajara.com");

break;
case 2:
addOpt(oCntrl, 0, "Madrid", "http://www.madrid.com");
addOpt(oCntrl, 1, "Barcelona", "http://www.barcelona.com");
addOpt(oCntrl, 2, "San Sebastián", "http://www.sansebastian.com");
addOpt(oCntrl, 3, "veracruz", "veracruz");

break;
case 3:
addOpt(oCntrl, 0, "Caracas", "http://www.caracas.com");
break;
}
}
</script>
</head>
<body>

<form name="frm">
<table border="0" width="482">
<tr>
<td width="25">
Pais
</td>
<td width="89">
<select name="pais" onchange="cambia(document.forms['frm']['ciudad'],document.forms['frm']['pais'])">
<option value=""></option>
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td width="6"> 

</td>
<td width="44">
Ciudad
</td>
<td width="296">
<select name="ciudad" >
</select> </td>
</tr>
<tr>
<td>Pais</td>
<td><select name="pais[]" onchange="cambia(document.forms['frm']['ciudad[]'],document.forms['frm']['pais[]'])">
<option value=""></option>
<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[]" >
</select></td>
</tr>
<tr>
<td>Pais</td>
<td><select name="select" id="select" onchange="cambia(document.frm.select2,document.frm .select)">
<option value=""></option>
<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="select2" id="select2" >
</select></td>
</tr>
</table>
</form>
</body>
</html>

saludos

chalchis · #3 (**permalink**) 25/02/2006, 19:09

hola Cap.Buscapina mi problema se agraba ya que los select los creo dinamicamente con DOM asi:

<form name="formulario" method="post" >
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="texforms"><div align="center">
<button name="boton_1" type="button" title="Nuevo insumo" alt="Nuevo insumo" class="botonenviarinsumo" onClick="suma('aqui')"> <img src="../Imagen/Insumos_img/nuevo.gif" border="0" width="22" height="22"><br>
solicitar artículo </button>

<button name="enviar" type="submit" title="Enviar solicitud" alt="Enviar solicitud" class="botonenviarinsumo"> <img src="../Imagen/Insumos_img/send.gif" border="0" width="22" height="22"><br>
enviar solicitud </button>
</div></td>
</tr>
<tr>
<td class="texforms"><div align="center">   </div></td>
</tr>
<tr>
<td class="texforms"><div align="center"> <small>nota: los campos con * son obligatorios</small> </div></td>
</tr>
<tr>
<td align="center" valign="middle" >
<div style="width:500px; overflow:auto;height:250px;" id="aqui">
<table width="434" border="0" align="center" cellpadding="1" cellspacing="0" >
</table>
</div></td>
</tr>
<tr>
<td>
<div align="right">
<input type="hidden" name="texto" value="Enviar">
<input type="hidden" name="depaid" value="1">
<input type="hidden" name="encargadotxt" value="gpacheco">
</div></td>
</tr>
</table>
</form>

espero que me puedar ayudar amigo
gracias, espero tus comentarios

chalchis · #4 (**permalink**) 25/02/2006, 19:15

hay un funciona que crea una tabla dinamicamente con varios select
donde llego crear el select padre es asi

var linea2=document.createElement("tr");
//declaramos la 1 celda de la segunda fila
var celda_2_1 = document.createElement("td");
//declaramos que contenido tendra esa celda contenido_fila_celda(fila 2 celda2)
var contenido_2_1=document.createTextNode(" ");//pongo un vacio para no imprima nada
//fin celda 1 fila 2
//declaramos la 2 celda de la segunda fila
var celda_2_2 = document.createElement("td");
celda_2_2.width="71";//medida de esta celda
celda_2_2.align="right";//alineamos lo que haya en esta celda
celda_2_2.className="texforms";
//declaramos el contenido de la celda 2 fila 2
var contenido_2_2=document.createTextNode("Categoria:" );//aqui creamos un texto que sera el contenido de la celda
//fin celda 2 fila 2
//declaramos la 3 celda de la segunda fila
var celda_2_3=document.createElement("td");
//celda_2_3.width="288";//medida de esta celda
//declaramos el contenido de la celda 3 fila 2
var contenido_2_3=document.createElement("select");
contenido_2_3.name="lista_categoria[]";
contenido_2_3.id="lista_categoria";
//onchange="cambia(document.forms.formulario.lista_a rticulos)"
contenido_2_3.onchange = function(){cambia(document.forms['formulario']['lista_categoria'],document.forms['formulario']['lista_proveedores'])};//esta funcion borra una tabla creada por este medio DOM
contenido_2_3.options[0] = new Option('', '');
contenido_2_3.options[1] = new Option('Artículos de Oficina', '2');contenido_2_3.options[2] = new Option('Artículos de Seguridad', '3');contenido_2_3.options[3] = new Option('Artículos de Limpieza', '4');
contenido_2_3.className="areatx";
//fin celda 3 fila 2
//declaramos la 4 celda de la segunda fila
var celda_2_4 = document.createElement("td");
celda_2_4.width="26";//medida de esta celda
//declaramos que contenido tendra esa celda contenido_fila_celda(fila 2 celda2)
var contenido_2_4=document.createTextNode(" ");//pongo un vacio para no imprima nada
//fin celda 4

como podre aplicar el script que mencionas

Cap.Buscapina · #5 (**permalink**) 25/02/2006, 21:31

no logro comprender.

El primer script no era el que utilizabas??

chalchis · #6 (**permalink**) 25/02/2006, 22:17

lo que pasa que queria saber si podia implementar lo que publicaste pero en vez de usar uno o varios selects estaticos estos se crean dinamicamente
con dom.
la funcion que primero publique si lo uso, el detalle es como saber que select padre fue el que llama al evento cambiar si ese select fue creado dinamicamente con dom

chalchis · #7 (**permalink**) 26/02/2006, 14:25

hola Cap.Buscapina ya se soluciono todo el problemas con ayuda te varios
camaradas de de este foro

Javier, Caricatos y tu
el codigo es muy extenso asi que si les interesa por este medio pasenme sus cuentas de mail o si saben de algun lado donde pueda ponerlo de manera free
saludos

chalchis · #8 (**permalink**) 27/02/2006, 11:35

chequenlo:

http://chalchis.webcindario.com/Scripts/formulario.htm

saludos

Cita:

Iniciado por chalchis

hola Cap.Buscapina ya se soluciono todo el problemas con ayuda te varios
camaradas de de este foro

Javier, Caricatos y tu
el codigo es muy extenso asi que si les interesa por este medio pasenme sus cuentas de mail o si saben de algun lado donde pueda ponerlo de manera free
saludos