ayuda con Listas desplegables dependientes + vinculos

arkadhoz · #1 (**permalink**) 21/07/2009, 22:26

como lo indico en el titulo necesito ayuda con este tipo de listas o combobox.
La idea es que al seleccionar una opcion de la primera lista los datos en la segunda cambien con esta.
un ejemplo con peliculas
(1º lista deslegable)
escoja categoria: ciencia ficcion
(los datos en la segunda lista desplegable cambien)
(2º lista desplegable)
transformers..
y que al escoger la opcion de la segunda lista desplegable me envie al vinculo deseado, les dejo un script, funciona pero no me envia al vinculo deseado.

Script:

Código:

<html>

<script type="text/javascript" language="javascript">

function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;

    if (selec[0].selected == true)
    {
    var seleccionar = new Option("<-- esperando selección","","","");
    combo[0] = seleccionar;
    }

    if (selec[1].selected == true)
    {
    var popular1 = new Option("Rock de los 90","Rock1","","");
    var popular2 = new Option("Rock de los 80","Rock2","","");
    combo[0] = popular1;
    combo[1] = popular2;
    }

    if (selec[2].selected == true)
    {
    var academica1 = new Option("Musica del Barroco","Barroco","","");
    var academica2 = new Option("Musica del Siglo XX","Siglo XX","","");
    var academica3 = new Option("Música del Romantisismo","Romantico","","");
    combo[0] = academica1;
    combo[1] = academica2;
    combo[2] = academica3;
    }
}
</script>
</html>

formulario:

Código:

form name="ejemplo2" method="POST" target="_blank" action="pagina.htm">

<select name="tipos" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="musicapopular">Música Popular (Rock)</option>

<option value="musicaacademica">Música Académica</option>

</select>

 

<select name="estilo">

<option value=""><-- esperando selección</option>

</select>

 

<input type="submit" value="Enviar"></form>

quimfv · #2 (**permalink**) 22/07/2009, 02:39

Te esta funcionando correctamente... esta llamando a pagina.htm y le pasas por post el contenido del formulario...

El problema es que una pagina htm (por lo tanto estatica) no sabra que hacer con el post....

Debes llamar una pagina dinàmica (php, jsp, asp...) que pueda variar en funcion de lo que recibe por post.

Otra opcion es si vas a llamar paginas estaticas, es tener las distintas direcciones en el script igual que tienes las opciones para el segundo combo y usarlas...

Algo así...

Código HTML:

<html>

<script type="text/javascript" language="javascript">
var direccionesRoc=new Array();
var direccionesAca=new Array();
direccionesRoc[0]="rock1.htm";
direccionesRoc[1]="rock2.htm";
direccionesAca[0]="barroco.htm";
direccionesAca[1]="sigloxx.htm";
direccionesAca[2]="romantico.htm";

function direccion(form){
var selec = form.tipos.options;
var combo = form.estilo.options;
    if (selec[1].selected == true){
	     document.form.action=direccionesRoc[combo.selectedIndex];
	}
    if (selec[2].selected == true){
	     form.action=direccionesAca[combo.selectedIndex];
	}

        /*Se puede quitar una vez vemos que funciona*/
	alert(form.action);

}



function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;

    if (selec[0].selected == true)
    {
    var seleccionar = new Option("Esperando selección");
    combo[0] = seleccionar;
    }

    if (selec[1].selected == true)
    {
    var popular1 = new Option("Rock de los 90");
    var popular2 = new Option("Rock de los 80");
    combo[0] = popular1;
    combo[1] = popular2;
    }

    if (selec[2].selected == true)
    {
    var academica1 = new Option("Musica del Barroco");
    var academica2 = new Option("Musica del Siglo XX");
    var academica3 = new Option("Música del Romantisismo");
    combo[0] = academica1;
    combo[1] = academica2;
    combo[2] = academica3;
    }
}
</script>

<body>
<form name="ejemplo2" method="POST" target="_blank" action="">

<select name="tipos" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="musicapopular">Música Popular (Rock)</option>

<option value="musicaacademica">Música Académica</option>

</select>

 

<select name="estilo" onChange="direccion(this.form)">

<option value="">Esperando selección</option>

</select>

 

<input type="submit" value="Enviar"></form>
</body>
</html>

Quim

arkadhoz · #3 (**permalink**) 22/07/2009, 08:15

Gracias Quimfv funciona de la manera que esperaba

nipley · #4 (**permalink**) 18/04/2016, 18:09

Cita:

Iniciado por quimfv

Te esta funcionando correctamente... esta llamando a pagina.htm y le pasas por post el contenido del formulario...

El problema es que una pagina htm (por lo tanto estatica) no sabra que hacer con el post....

Debes llamar una pagina dinàmica (php, jsp, asp...) que pueda variar en funcion de lo que recibe por post.

Otra opcion es si vas a llamar paginas estaticas, es tener las distintas direcciones en el script igual que tienes las opciones para el segundo combo y usarlas...

Algo así...

Código HTML:

<html>

<script type="text/javascript" language="javascript">
var direccionesRoc=new Array();
var direccionesAca=new Array();
direccionesRoc[0]="rock1.htm";
direccionesRoc[1]="rock2.htm";
direccionesAca[0]="barroco.htm";
direccionesAca[1]="sigloxx.htm";
direccionesAca[2]="romantico.htm";

function direccion(form){
var selec = form.tipos.options;
var combo = form.estilo.options;
    if (selec[1].selected == true){
	     document.form.action=direccionesRoc[combo.selectedIndex];
	}
    if (selec[2].selected == true){
	     form.action=direccionesAca[combo.selectedIndex];
	}

        /*Se puede quitar una vez vemos que funciona*/
	alert(form.action);

}



function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;

    if (selec[0].selected == true)
    {
    var seleccionar = new Option("Esperando selección");
    combo[0] = seleccionar;
    }

    if (selec[1].selected == true)
    {
    var popular1 = new Option("Rock de los 90");
    var popular2 = new Option("Rock de los 80");
    combo[0] = popular1;
    combo[1] = popular2;
    }

    if (selec[2].selected == true)
    {
    var academica1 = new Option("Musica del Barroco");
    var academica2 = new Option("Musica del Siglo XX");
    var academica3 = new Option("Música del Romantisismo");
    combo[0] = academica1;
    combo[1] = academica2;
    combo[2] = academica3;
    }
}
</script>

<body>
<form name="ejemplo2" method="POST" target="_blank" action="">

<select name="tipos" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="musicapopular">Música Popular (Rock)</option>

<option value="musicaacademica">Música Académica</option>

</select>

 

<select name="estilo" onChange="direccion(this.form)">

<option value="">Esperando selección</option>

</select>

 

<input type="submit" value="Enviar"></form>
</body>
</html>

Quim

hola me llamo sergio y soy de argentina me podrian ayudar a colocarle 2 selecciones más a estas listas..
ya que necesito crear uno similar pero es para baterias de autos que puedan ser seleccionados
1: la marca
2: año
3: modelo
ejemplo: http://www.moura.com.br/pt/qualsuabateria

muchas gracias aguardo su respuesta!!!

nipley · #5 (**permalink**) 18/04/2016, 18:11

hola me llamo sergio y soy de argentina me podrian ayudar a colocarle 2 selecciones más a estas listas..
ya que necesito crear uno similar pero es para baterias de autos que puedan ser seleccionados
1: la marca
2: año
3: modelo
ejemplo: http://www.moura.com.br/pt/qualsuabateria

muchas gracias aguardo su respuesta!!!

PIRRUMAN · #6 (**permalink**) 19/04/2016, 11:27

por cada combo mas debes agregar

la funcion que se ejecutara en el onchange del padre

Código Javascript:

Ver originalfunction funciondesdeelpadre(form)
{
var selec = form.padre.options; //name del select padre
var combo = form.hijo.options;//name del select que se llenara(hijo)
combo.length = null;
 
    if (selec[0].selected == true) //valor por posicion de las opcion del padre
    {
    var seleccionar = new Option("Esperando selección");
    combo[0] = seleccionar; //valores que tomara el hijo
    }
 
    if (selec[1].selected == true)//valor por posicion de las opcion del padre
    {
    var popular1 = new Option("Rock de los 90");
    var popular2 = new Option("Rock de los 80");
    combo[0] = popular1;//valores que tomara el hijo
    combo[1] = popular2;//valores que tomara el hijo
    }
}

y un select hijo que se llenara

Código HTML:

Ver original<select name="hijo">
 
<option value="">Esperando selección</option>
 
</select>

nipley · #7 (**permalink**) 20/04/2016, 14:24

hola gracias por contestar, pero debo armar con 3 niveles

MARCA MODELO COMBUSTIBLE (diesel/Gasolina) >>> link
............
pero el ejemplo no funcion va a cualquier link o tira error , la verdad no entiendo bien esto, pero arme algo para probar y por ahi me podes corregir ,

Al seleccionar la marca, se busca el modelo de auto, y luego el tipo de combustible que usa y de ahí al modelo de batería que lleva..

lo que pasa es que no va a los link y el tercer nivel no se como armarlo, .. jaja parece fácil pero es complicado esto para mi amigo..jajaja

mi codigo:
-------------------------------
<html>
<head>
<meta charset="UTF-8">
<title>Baterias Moura elija su bateria</title>

<script type="text/javascript" language="javascript">
var direccionesRoc=new Array();
var direccionesAca=new Array();
ford1[0]="ford1.htm";
ford2[1]="ford2.htm";
chevrolet1[0]="chevrolet1.htm";
chevrolet2[1]="chevrolet2.htm";
chevrolet3[2]="chevrolet3.htm";

//ejemplo
function funciondesdeelpadre(form)
{
var selec = form.padre.options; //name del select padre
var combo = form.hijo.options;//name del select que se llenara(hijo)
combo.length = null;

if (selec[0].selected == true) //valor por posicion de las opcion del padre
{
var seleccionar = new Option("Esperando selección");
combo[0] = seleccionar; //valores que tomara el hijo
}

if (selec[1].selected == true)//valor por posicion de las opcion del padre
{
var popular1 = new Option("Rock de los 90");
var popular2 = new Option("Rock de los 80");
combo[0] = popular1;//valores que tomara el hijo
combo[1] = popular2;//valores que tomara el hijo
}
}
//fin ejemplo

function agregarOpciones(form)
{
var selec = form.marca.options;
var combo = form.modelo.options;
combo.length = null;

if (selec[0].selected == true)
{
var seleccionar = new Option("Esperando selección");
combo[0] = seleccionar;
}

if (selec[1].selected == true)
{
var ford1 = new Option("F100");
var ford2 = new Option("RANGER");
combo[0] = ford1;
combo[1] = ford2;
}

if (selec[2].selected == true)
{
var chevrolet1 = new Option("ASTRA");
var chevrolet2 = new Option("CORSA");
var chevrolet3 = new Option("MERIVA");
combo[0] = chevrolet1;
combo[1] = chevrolet2;
combo[2] = chevrolet3;
}
}
</script>
</head>
<body>
<form name="ejemplo2" method="POST" target="_blank" action="">

<select name="marca" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="ford">ford</option>

<option value="chevrolet">chevrolet</option>

</select>

<select name="modelo" onChange="direccion(this.form)">

<option value="">Esperando selección</option>

</select>

<select name="combustible">

<option value="">Esperando selección</option>

</select>

<input type="submit" value="Buscar"></form>
</body>
</html>
-----------------------------------
http://nipley.com.ar/site/00000000.html
------------------------------------
gracias!!!