Foros del Web » Programando para Internet » Javascript »

Forzar selected en listas dependientes

 Estas en el tema de Forzar selected en listas dependientes en el foro de Javascript en Foros del Web. Hola amigos, tengo dos listas dependientes que cargo con los valores de una base de datos, como podría hacer para que en estas listas, quedase ...
  #1 (permalink)  
Antiguo 07/04/2005, 04:15
 
Fecha de Ingreso: junio-2004
Mensajes: 36
Antigüedad: 20 años, 6 meses
Puntos: 0
Forzar selected en listas dependientes
Hola amigos, tengo dos listas dependientes que cargo con los valores de una base de datos, como podría hacer para que en estas listas, quedase seleccionado el valor que tengo leido desde otra tabla.
el codigo es el siguiente:
...
...
....
echo "
function opcion(oCntrl, iPos, sTxt, sVal){
var campos=sTxt.split('*');
var TVal = campos[0];
var TTxt = campos[1];
var selOpcion=new Option(TTxt, TVal);
eval(oCntrl.options[iPos]=selOpcion);
}


function cambia(oMster, oCntrl){
var nSelected = oMster.selectedIndex;
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i < (JSacti[nSelected].length); i++)
opcion(oCntrl, i, JSacti[nSelected][i], String(i));
}

function llena(oCntrl){
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i <( JSsector.length); i++){
opcion(oCntrl, i, JSsector[i], String(i));
}
}

</script>\n";

include('formulario_empresas.php');
?>
<script language='JavaScript'>
llena(document.formulario.sector1);
llena(document.formulario.sector2);
llena(document.formulario.sector3);
</script>

dentro del PHP
...
...
<form name="formulario">
...
...
<tr>
<td width="50%" align="center"><select name='sector1' class='piefoto' id ='id_sector1' onChange="cambia(this, document.formulario.activ1)" >
</select> </td>
<td width="78%" align="center"><select name='activ1' class='piefoto' id ='id_activ1'>
</select></td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector2' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ2)" >
</select> </td>
<td width="78%" align="center"><select name='activ2' class='piefoto' id ='id_activ2'>
</select></td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector3' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ3)" >
</select> </td>
<td width="78%" align="center"><select name='activ3' class='piefoto' id ='id_activ3'>
</select></td>
</tr>
...
...
</form>
tal como está funciona correctamente, pero siempre tengo que volver a seleccionar, ya que queda al inicio del select y desearía poder hacer que los selects se quedasen en los valores que tengo leidos.

Gracias de antemano.
  #2 (permalink)  
Antiguo 08/04/2005, 01:52
 
Fecha de Ingreso: junio-2004
Mensajes: 36
Antigüedad: 20 años, 6 meses
Puntos: 0
Esto sigue igual
El codigo que estoy utilizando es una variación del que puso Kaopectate en las FAQ'S.
He estado trabajando en él, pasandole a las funciones un parametro más, pero no se como hacer para que la opción que sea igual al parametro pasado quede seleccionada.

¿ Me echais una mano ?

Gracias
  #3 (permalink)  
Antiguo 08/04/2005, 01:54
Avatar de tunait
Moderadora
  
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 4 meses
Puntos: 381
Es complicado probar un cambio teniendo que teclear las opciones a mano.

Haz una cosa, ejecuta la página para que escriba el script con sus opciones yá escritas desde la base de datos y pega el código que llega al nagegador
  #4 (permalink)  
Antiguo 08/04/2005, 11:41
 
Fecha de Ingreso: junio-2004
Mensajes: 36
Antigüedad: 20 años, 6 meses
Puntos: 0
Ahí va el código
Hola Tunait
el codigo que genera la ejecución es el siguiente
<script type='text/javascript'>
var JSacti0=new Array(' ');
var JSacti1= new Array('*Seleccione Actividad','001*Calefacción y Aire acon.','002*Cerrajerías','003*Cristalería','004*El ectricidad','005*Electrodomésticos','006*Ferreterí as','007*Fontanería y saneamiento','008*Guardamuebles','009*Limpieza','0 10*Mantenimiento de Jardines','011*Mantenimiento Piscinas','012*Mudanzas','013*Persianas y Toldos','014*Pinturas','015*Reformas','016*Segurid ad','017*Seguros');
var JSacti2= new Array('*Seleccione Actividad','001*Inmobiliarias','002*Casas Rurales','003*Promotores','004*Alquileres');
var JSacti3= new Array('*Seleccione Actividad','001*Arquitectos','002*Carpintería','00 3*Cerrajerías','004*Construcción','005*Cristalería ','006*Escayolistas','007*Gunitados','008*Herrería s','009*Ingenieros','010*Mármoles','011*Muros','01 2*Prefabricados');
var JSacti4= new Array('*Seleccione Actividad','001*Bricolaje','002*Decoradores','003* Enmarcaciones','004*Lámparas e Iluminación','005*Muebles','006*Muebles de Baño','007*Muebles de Cocina','008*Muebles de Jardín','009*Muebles de Oficina','010*Pavimentos','011*Persianas y Toldos','012*Puertas y Ventanas','013*Regalos','014*Textil Hogar');
var JSacti5= new Array('*Seleccione Actividad','001*Calzados','002*Complementos','003* Deporte','004*Flores','005*Informática','006*Joyer ías','007*Juguetes','008*Librerías','009*Moda infantil','010*Ópticas','011*Perfumerías','012*Reg alos','013*Ropa','014*Telefonía');
var JSacti6= new Array('*Seleccione Actividad','001*Bibliotecas','002*Casas de cultura','003*Diseñadores','004*Escultores','005*G alerías','006*Librerías','007*Museos','008*Músicos ','009*Pintores');
var JSacti7= new Array('*Seleccione Actividad','001*Restaurantes','002*Pizzerías','003 *Asadores','004*Comida Casera','005*Bares','006*Para Llevar','007*Bodegas','008*Marisquerías','009*Comi da Étnica','010*Comida Regional');
var JSacti8= new Array('*Seleccione Actividad','001*Albergues','002*Alquileres','003*C amping','004*Casas Rurales','005*Hostales','006*Hoteles');
var JSacti9= newA Array('*Seleccione Actividad','001*Chiringuitos','002*Discotecas','00 3*Música en Vivo','004*Pubs');
var JSacti10= new Array('*Seleccione Actividad','001*Centros de Estética','002*Dietética','003*Fisioterapeutas','0 04*Gimnasios','005*Herboristerías','006*Masajes',' 007*Medicina Natural','008*Oculistas','009*Ópticas','010*Ortope dias','011*Podólogos','012*Yoga');
var JSacti11= new Array('*Seleccione Actividad','001*Abonos','002*Cooperativas','003*In secticidas','004*Jardinería','005*Mantenimientos', '006*Maquinaria y Utillaje','007*Muros','008*Riegos','009*Viveros');
var JSacti12= new Array('*Seleccione Actividad','001*Idiomas','002*Música','003*Danza', '004*Informática','005*Autoescuelas','006*Educació n Básica','007*Oposiciones','008*Yoga','009*Jardín de Infancia','010*Colegios Privados');
var JSacti13= new Array('*Seleccione Actividad','001*Agencias de Viaje','002*Alquileres','003*Autobuses','004*Chapa y Pintura','005*Ciclomotores y Bicis','006*Concesionarios','007*Electricidad','00 8*Logística','009*Reparación','010*Ruedas');
var JSacti14= new Array('*Seleccione Actividad','001*Alquiler Herramientas','002*Asesores','003*Distribuidores', '004*Estructuras','005*Hormigones','006*Informátic a','007*Material Eléctrico','008*Materiales de Construcción','009*Mayoristas','010*Publicistas',' 011*Saneamiento','012*Seguros','013*Transportes');
var JSacti=new Array(JSacti0,JSacti1,JSacti2,JSacti3,JSacti4,JSac ti5,JSacti6,JSacti7,JSacti8,JSacti9,JSacti10,JSact i11,JSacti12,JSacti13,JSacti14);
var JSsector=new Array('*Seleccione Sector','00*Servi-Hogar','01*Buscar casa','02*Construyendo.','03*Decora tu casa.','04*Ir de tiendas','05*Cultura y arte','06*Comer y beber','07*Alojamientos','08*De marcha','09*Salud y deporte','10*Campo y Jardin','11*Enseñanza','12*Como moverse','13*Para tu empresa');
function opcion(oCntrl, iPos, sTxt, sVal, Pass){
var campos=sTxt.split('*');
var TVal = campos[0];
var TTxt = campos[1];
var selOpcion=new Option(TTxt, TVal);
eval(oCntrl.options[iAPos]=selOpcion);

}
function cambia(oMster, oCntrl, Pass){
var nSelected = oMster.selectedIndex;
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i < (JSacti[nSelected].length); i++)
opcion(oCntrl, i, JSacti[nSelected][i], String(i), Pass);
}

function llena(oCntrl,vPas){
Pass=vPas+1;
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i <( JSsector.length); i++){
opcion(oCntrl, i, JSsector[i], String(i), Pass);
}
}
</script>
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<table width="500" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="19%" rowspan="2" valign="top">
<table width="100%" border="0" cellspacing="5" cellpadding="1">
<tr>
<td align="center"><input type="submit" name="accion" value="Insertar" class="parrafo"></td>
</tr>
<tr>

<td align="center"><input type="submit" name="accion" value="Eliminar" class="parrafo"></td>
</tr>
<tr>
<td align="center"><input type="submit" name="accion" value="Modificar" class="parrafo"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td align="center"><a href="pag_inicio.php?menu=90" class="alertas"> Salir </a></td>

</tr>
</table>

</td>

<td width="81%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="center" class="alertas" colspan="2">Posibles Registros
a Modificar <select name="registro" class="normal" onChange="this.form.submit();">

<option value="" >Seleccione Empresa</option>
<option value="40" >Bianca Joyeria</option>
<option value="8" >Camping Ole, S.A.</option>

<option value="38" selected>Centre Informátic Oliva (CIO)</option>

</select> </td>
</tr>
<tr>
<td colspan="2"><hr></td>

</tr>

<tr>
<td align="center">Cód. Postal</td>
<td align="left" class="parrafo" > <select name="pobla" class="piefoto">
<option value="">Seleccione Población</option>
<option value="03792">Murla</option>
<option value="46780" selected >Oliva</option>
<option value="03760">Ondara</option>
<option value="03790">Orba</option>
</select>
</tr>

<tr>
<td colspan="2"><hr></td>
</tr>
<tr><td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" align="center">Sectores</td>

<td width="78%" align="center">Actividades</td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector1' class='piefoto' id ='id_sector1' onChange="cambia(this, document.formulario.activ1)" >
</select> </td>
<td width="78%" align="center"><select name='activ1' class='piefoto' id ='id_activ1'>
</select></td>
</tr>

<tr>
<td width="50%" align="center"><select name='sector2' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ2)" >
</select> </td>
<td width="78%" align="center"><select name='activ2' class='piefoto' id ='id_activ2'>
</select></td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector3' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ3)" >
</select> </td>

<td width="78%" align="center"><select name='activ3' class='piefoto' id ='id_activ3'>
</select></td>
</tr>
</table></td></tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td height="23" colspan="2" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td height="23" align="center"><input type="submit" name="modif" valueA="Modificar" class="parrafo"></td>
<td align="center"><input type="submit" name="modif" value="NO Modificar" class="parrafo"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

</table>
</form>
**04005**11004**13006
<script language='JavaScript'>
var IPaso1=IPaso2=IPaso3=0;
var PPaso1=PPaso2=PPaso3=0;
IPaso1=04;PPaso1=005;
IPaso2=11;PPaso2=004;
IPaso3=13;PPaso3=006;
llena(document.formulario.sector1,IPaso1);
llena(document.formulario.sector2,IPaso2);
llena(document.formulario.sector3,IPaso3);
</script>

He recortado los campos que no tienen importancia dentro del JavaScript
Las variables IPasoX y PPasoX son las que deseo pasar al JS para que queden seleccionadas.
Las variables que están entre ** son las que recoje de la base de datos, las cuales parto para poder deteminar los selecs.

Mira que puedes hacer y graciás por molestarte.

Por cierto, por tu página he recogido de la misma un escript para el scroll que utilizo en http://el-balcon.com.

De nuevo gracias
  #5 (permalink)  
Antiguo 11/04/2005, 01:26
 
Fecha de Ingreso: junio-2004
Mensajes: 36
Antigüedad: 20 años, 6 meses
Puntos: 0
Hola de nuevo tunait. Repito el código porque he visto que en el post anterior no se podia leer nada.
Código PHP:
<script type='text/javascript'>
var JSacti0=new Array(' ');
var JSacti1= new Array('*Seleccione Actividad','001*Calefacción y Aire acon.','002*Cerrajerías','003*Cristalería','004*El ectricidad','005*Electrodomésticos','006*Ferreterí as','007*Fontanería y saneamiento','008*Guardamuebles','009*Limpieza','0 10*Mantenimiento de Jardines','011*Mantenimiento Piscinas','012*Mudanzas','013*Persianas y Toldos','014*Pinturas','015*Reformas','016*Segurid ad','017*Seguros');
var JSacti2= new Array('*Seleccione Actividad','001*Inmobiliarias','002*Casas Rurales','003*Promotores','004*Alquileres');
var JSacti3= new Array('*Seleccione Actividad','001*Arquitectos','002*Carpintería','00 3*Cerrajerías','004*Construcción','005*Cristalería ','006*Escayolistas','007*Gunitados','008*Herrería s','009*Ingenieros','010*Mármoles','011*Muros','01 2*Prefabricados');
var JSacti4= new Array('*Seleccione Actividad','001*Bricolaje','002*Decoradores','003* Enmarcaciones','004*Lámparas e Iluminación','005*Muebles','006*Muebles de Baño','007*Muebles de Cocina','008*Muebles de Jardín','009*Muebles de Oficina','010*Pavimentos','011*Persianas y Toldos','012*Puertas y Ventanas','013*Regalos','014*Textil Hogar');
var JSacti5= new Array('*Seleccione Actividad','001*Calzados','002*Complementos','003* Deporte','004*Flores','005*Informática','006*Joyer ías','007*Juguetes','008*Librerías','009*Moda infantil','010*Ópticas','011*Perfumerías','012*Reg alos','013*Ropa','014*Telefonía');
var JSacti6= new Array('*Seleccione Actividad','001*Bibliotecas','002*Casas de cultura','003*Diseñadores','004*Escultores','005*G alerías','006*Librerías','007*Museos','008*Músicos ','009*Pintores');
var JSacti7= new Array('*Seleccione Actividad','001*Restaurantes','002*Pizzerías','003 *Asadores','004*Comida Casera','005*Bares','006*Para Llevar','007*Bodegas','008*Marisquerías','009*Comi da Étnica','010*Comida Regional');
var JSacti8= new Array('*Seleccione Actividad','001*Albergues','002*Alquileres','003*C amping','004*Casas Rurales','005*Hostales','006*Hoteles');
var JSacti9= newA Array('*Seleccione Actividad','001*Chiringuitos','002*Discotecas','00 3*Música en Vivo','004*Pubs');
var JSacti10= new Array('*Seleccione Actividad','001*Centros de Estética','002*Dietética','003*Fisioterapeutas','0 04*Gimnasios','005*Herboristerías','006*Masajes',' 007*Medicina Natural','008*Oculistas','009*Ópticas','010*Ortope dias','011*Podólogos','012*Yoga');
var JSacti11= new Array('*Seleccione Actividad','001*Abonos','002*Cooperativas','003*In secticidas','004*Jardinería','005*Mantenimientos', '006*Maquinaria y Utillaje','007*Muros','008*Riegos','009*Viveros');
var JSacti12= new Array('*Seleccione Actividad','001*Idiomas','002*Música','003*Danza', '004*Informática','005*Autoescuelas','006*Educació n Básica','007*Oposiciones','008*Yoga','009*Jardín de Infancia','010*Colegios Privados');
var JSacti13= new Array('*Seleccione Actividad','001*Agencias de Viaje','002*Alquileres','003*Autobuses','004*Chapa y Pintura','005*Ciclomotores y Bicis','006*Concesionarios','007*Electricidad','00 8*Logística','009*Reparación','010*Ruedas');
var JSacti14= new Array('*Seleccione Actividad','001*Alquiler Herramientas','002*Asesores','003*Distribuidores', '004*Estructuras','005*Hormigones','006*Informátic a','007*Material Eléctrico','008*Materiales de Construcción','009*Mayoristas','010*Publicistas',' 011*Saneamiento','012*Seguros','013*Transportes');
var JSacti=new Array(JSacti0,JSacti1,JSacti2,JSacti3,JSacti4,JSac ti5,JSacti6,JSacti7,JSacti8,JSacti9,JSacti10,JSact i11,JSacti12,JSacti13,JSacti14);
var JSsector=new Array('*Seleccione Sector','00*Servi-Hogar','01*Buscar casa','02*Construyendo.','03*Decora tu casa.','04*Ir de tiendas','05*Cultura y arte','06*Comer y beber','07*Alojamientos','08*De marcha','09*Salud y deporte','10*Campo y Jardin','11*Enseñanza','12*Como moverse','13*Para tu empresa');
function opcion(oCntrl, iPos, sTxt, sVal, Pass){
var campos=sTxt.split('*');
var TVal = campos[0];
var TTxt = campos[1];
var selOpcion=new Option(TTxt, TVal);
eval(oCntrl.options[iAPos]=selOpcion);

}
function cambia(oMster, oCntrl, Pass){
var nSelected = oMster.selectedIndex;
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i < (JSacti[nSelected].length); i++)
opcion(oCntrl, i, JSacti[nSelected][i], String(i), Pass);
}

function llena(oCntrl,vPas){
Pass=vPas+1;
while (oCntrl.length) oCntrl.remove(0);
for(var i = 0; i <( JSsector.length); i++){
opcion(oCntrl, i, JSsector[i], String(i), Pass);
}
}
</script>
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<table width="500" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="19%" rowspan="2" valign="top">
<table width="100%" border="0" cellspacing="5" cellpadding="1">
<tr>
<td align="center"><input type="submit" name="accion" value="Insertar" class="parrafo"></td>
</tr>
<tr>

<td align="center"><input type="submit" name="accion" value="Eliminar" class="parrafo"></td>
</tr>
<tr>
<td align="center"><input type="submit" name="accion" value="Modificar" class="parrafo"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td align="center"><a href="pag_inicio.php?menu=90" class="alertas"> Salir </a></td>

</tr>
</table>

</td>

<td width="81%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="center" class="alertas" colspan="2">Posibles Registros
a Modificar <select name="registro" class="normal" onChange="this.form.submit();">

<option value="" >Seleccione Empresa</option>
<option value="40" >Bianca Joyeria</option>
<option value="8" >Camping Ole, S.A.</option>

<option value="38" selected>Centre Informátic Oliva (CIO)</option>

</select> </td>
</tr>
<tr>
<td colspan="2"><hr></td>

</tr>

<tr>
<td align="center">Cód. Postal</td>
<td align="left" class="parrafo" > <select name="pobla" class="piefoto">
<option value="">Seleccione Población</option>
<option value="03792">Murla</option>
<option value="46780" selected >Oliva</option>
<option value="03760">Ondara</option>
<option value="03790">Orba</option>
</select>
</tr>

<tr>
<td colspan="2"><hr></td>
</tr>
<tr><td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" align="center">Sectores</td>

<td width="78%" align="center">Actividades</td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector1' class='piefoto' id ='id_sector1' onChange="cambia(this, document.formulario.activ1)" >
</select> </td>
<td width="78%" align="center"><select name='activ1' class='piefoto' id ='id_activ1'>
</select></td>
</tr>

<tr>
<td width="50%" align="center"><select name='sector2' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ2)" >
</select> </td>
<td width="78%" align="center"><select name='activ2' class='piefoto' id ='id_activ2'>
</select></td>
</tr>
<tr>
<td width="50%" align="center"><select name='sector3' class='piefoto' id ='id_sector2' onChange="cambia(this, document.formulario.activ3)" >
</select> </td>

<td width="78%" align="center"><select name='activ3' class='piefoto' id ='id_activ3'>
</select></td>
</tr>
</table></td></tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td height="23" colspan="2" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td height="23" align="center"><input type="submit" name="modif" valueA="Modificar" class="parrafo"></td>
<td align="center"><input type="submit" name="modif" value="NO Modificar" class="parrafo"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

</table>
</form>
**04005**11004**13006
<script language='JavaScript'>
var IPaso1=IPaso2=IPaso3=0;
var PPaso1=PPaso2=PPaso3=0;
IPaso1=04;PPaso1=005;
IPaso2=11;PPaso2=004;
IPaso3=13;PPaso3=006;
llena(document.formulario.sector1,IPaso1);
llena(document.formulario.sector2,IPaso2);
llena(document.formulario.sector3,IPaso3);
</script> 
Como decía en el post anterior, he recortado los campos que no tienen importancia dentro del JavaScript
Las variables IPasoX y PPasoX son las que deseo pasar al JS para que queden seleccionadas.
Las variables que están entre ** son las que recoje de la base de datos, las cuales parto para poder deteminar los selecs.

Mira que puedes hacer y graciás por molestarte

Salu2

J Sendra
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:04.