Select dependientes con link

nicolasluc · #1 (**permalink**) 26/03/2013, 09:07

Hola gente este es mi primer pedido muchas veces eh utilizado el foro y realmente son muy buenos.
tengo un problema que me esta quemando la cabeza hace muchísimo tiempo.vale aclarar que soy un autodidacta y que no eh estudiado programación todo lo que se es gracias leer en foros como este. bueno voy al grano tengo 2 select uno depende lo que quiero es que al seleccionar la segunda opción esta redireccione al usuario a una url...logre hacerlo en flash pero quiero hacerlo con javascript ya que es mucho mas rápido y se puede acceder desde cualquier dispositivo. muy aqui dejo lo que tengo hasta ahora

Código:

<SCRIPT LANGUAGE = "JavaScript">
<!--

var Apertura= new Array("1990", "1991", "1992", "1993", "1994","1995","1996");
var Clausura= new Array("2000", "2001", "2002", "2003", "2004","2005","2006");
var cricketplayers = new Array("Sachin Tendulkar", "Steve Waugh", "Brian Lara", "Sir Don Bradman");

function set_player() {

 	
var select_sport = document.myform.sport;
var select_player = document.myform.player;
var selected_sport = select_sport.options[select_sport.selectedIndex].value;

select_player.options.length=0;
if (selected_sport == "Apertura"){

 	 	for(var i=0; i<Apertura.length; i++)
 	 	select_player.options[select_player.options.length] = new Option(Apertura[i]);
 	}
if (selected_sport == "Clausura"){

 	 	for(var i=0; i<Clausura.length; i++)
 	 	select_player.options[select_player.options.length] = new Option(Clausura[i]);
 	}
if (selected_sport == "cricket"){
 	 	for(var i=0; i<cricketplayers.length; i++)
 	 	 	select_player.options[select_player.options.length] = new Option(cricketplayers[i]);
 	}
}
--> 
</SCRIPT>

<BODY>
<FORM NAME="myform" METHOD="POST">

Sport
<SELECT NAME="sport" onChange="set_player()">
<OPTION VALUE="Apertura">-------
<OPTION VALUE="Apertura">Apertura
<option value="Clausura">Clausura
<OPTION VALUE="cricket">Cricket
</SELECT>

Player
<SELECT NAME="player">
<OPTION>------
</SELECT>

</FORM>
</BODY>

y en esta (mi web) lo que hice en flash http://videosrojos.nixiweb.com/videos.html
para que sirva de ejemplo.
bueno desde ya muchas gracias y espero no molestar mucho

oscard41 · #2 (**permalink**) 26/03/2013, 21:56

Buenas noches, eso seria algo asi

Código Javascript:

Ver originalfunction redireccionar(){
    var select=document.getElementById('id_deTuSelect');
    if(select.selectIndex==1){//<---- coloco 1 por que se inicia de 0 osea es la posición 2
    Location.href='URL de la pagina...';
   }
}

Espero y te sirva mi ejemplo...

nicolasluc · #3 (**permalink**) 27/03/2013, 07:12

Cita:

Iniciado por oscard41

Buenas noches, eso seria algo asi

Código Javascript:

Ver originalfunction redireccionar(){
    var select=document.getElementById('id_deTuSelect');
    if(select.selectIndex==1){//<---- coloco 1 por que se inicia de 0 osea es la posición 2
    Location.href='URL de la pagina...';
   }
}

Espero y te sirva mi ejemplo...

Gracias por tu respuesta pero sigo con dudas no soy muy despierto como veras para esto del javascript....
deveria quitar algo de lo que ya tengo hecho y poner tu codigo o agregar tu codigo a lo que ya tengo y si asi fuera en que parte? y por ejemplo en mi codigo cual seria el id de selct que pides en tu codigo.......gracias de nuevo y disculpa las molestias

oscard41 · #4 (**permalink**) 27/03/2013, 21:32

Buenas noches, el id select que pidas sera el que le coloques a tu select --><select id='nombre_id'></select>

y bueno tienes que adaptar el ejemplo que te di a tu codigo!

dontexplain · #5 (**permalink**) 27/03/2013, 23:52

Difícilmente te puede funcionar si pones Location comenzando en mayúscula. Es todo en minúscula.

nicolasluc · #6 (**permalink**) 28/03/2013, 08:57

Cita:

Iniciado por dontexplain

Difícilmente te puede funcionar si pones Location comenzando en mayúscula. Es todo en minúscula.

Cita:

Iniciado por oscard41

Buenas noches, el id select que pidas sera el que le coloques a tu select --><select id='nombre_id'></select>

y bueno tienes que adaptar el ejemplo que te di a tu codigo!

Muchísimas Gracias a los 2...me rindo Realmente soy muy idiota para esto agradezco vuestra ayuda intente de varias formas pero no hay caso ni siquiera noto diferencia alguna nuevamente muchas gracias a los 2

dontexplain · #7 (**permalink**) 28/03/2013, 09:01

Ni me di cuenta de que lo que puso oscard41 estaba mal, me acabo de fijar...

No es select.selectIndex sino select.selectedIndex

Ya me extrañaba, yo juraría que era índice seleccionado pero no le presté más atención. En fin.

oscard41 · #8 (**permalink**) 28/03/2013, 09:19

Mis disculpas, si son do errores mios el location el en minusculas y es select.selectedIndex...

nicolasluc · #9 (**permalink**) 28/03/2013, 10:53

Cita:

Iniciado por dontexplain

Ni me di cuenta de que lo que puso oscard41 estaba mal, me acabo de fijar...

No es select.selectIndex sino [URL="http://www.w3schools.com/jsref/prop_select_selectedindex.asp"][I]select.selectedInd[/I]ex[/URL]

Ya me extrañaba, yo juraría que era índice seleccionado pero no le presté más atención. En fin.

Cita:

Iniciado por oscard41

Mis disculpas, si son do errores mios el location el en minusculas y es select.selectedIndex...

Gracias a los dos se ve que saben mucho y eso me empuja a hacer un intento mas
hice esto en que me estoy equivocando?¿

Código:

<SCRIPT LANGUAGE = "JavaScript">
<!--
function redireccionar(){
    var select=document.getElementById('Apertura');
    if(select.selectedIndex==1){//<---- coloco 1 por que se inicia de 0 osea es la posición 2
    location.href='http://www.infiernorojo.com/independiente/';
   }
}
var Apertura= new Array("1990", "1991", "1992", "1993", "1994","1995","1996");
var Clausura= new Array("2000", "2001", "2002", "2003", "2004","2005","2006");
var cricketplayers = new Array("Sachin Tendulkar", "Steve Waugh", "Brian Lara", "Sir Don Bradman");

function set_player() {

 	
var select_sport = document.myform.sport;
var select_player = document.myform.player;
var selected_sport = select_sport.options[select_sport.selectedIndex].value;

select_player.options.length=0;
if (selected_sport == "Apertura"){

 	 	for(var i=0; i<Apertura.length; i++)
 	 	select_player.options[select_player.options.length] = new Option(Apertura[i]);
 	}
if (selected_sport == "Clausura"){

 	 	for(var i=0; i<Clausura.length; i++)
 	 	select_player.options[select_player.options.length] = new Option(Clausura[i]);
 	}
if (selected_sport == "cricket"){
 	 	for(var i=0; i<cricketplayers.length; i++)
 	 	 	select_player.options[select_player.options.length] = new Option(cricketplayers[i]);
 	}
}
--> 
</SCRIPT>

<BODY>
<FORM NAME="myform" METHOD="POST">

Sport
<SELECT NAME="sport" onChange="set_player()">
<OPTION VALUE="Apertura">-------
<OPTION VALUE="Apertura">Apertura
<option value="Clausura">Clausura
<OPTION VALUE="cricket">Cricket
</SELECT>

Player
<SELECT NAME="player">
<OPTION>------
</SELECT>

</FORM>
</BODY>

dontexplain · #10 (**permalink**) 28/03/2013, 11:16

A ver. Lo primero. Está mal maquetado. html no es así.

Necesitas cerrar los option. Y no dejar cosas fueras. De momento, los select hay que abrirlos y cerrarlos correctamente, y no dejar options sin etiqueta de cierre.

Código HTML:

Ver original<select id="loquesea" onchange="redireccionar()">
<option id="abc">1</option>
<option id="asd">2</option>
</select>

Código Javascript:

Ver originalfunction redireccionar(){
    var select=document.getElementById('loquesea');
    if(select.selectedIndex==1){//<---- coloco 1 por que se inicia de 0 osea es la posición 2
    location.href='http://www.infiernorojo.com/independiente/';
   }
}

http://jsfiddle.net/YZjzK/

nicolasluc · #11 (**permalink**) 29/03/2013, 11:57

Cita:

Iniciado por dontexplain

A ver. Lo primero. Está mal maquetado. html no es así.

Necesitas cerrar los option. Y no dejar cosas fueras. De momento, los select hay que abrirlos y cerrarlos correctamente, y no dejar options sin etiqueta de cierre.

Código HTML:

Ver original<select id="loquesea" onchange="redireccionar()">
<option id="abc">1</option>
<option id="asd">2</option>
</select>

Código Javascript:

Ver originalfunction redireccionar(){
    var select=document.getElementById('loquesea');
    if(select.selectedIndex==1){//<---- coloco 1 por que se inicia de 0 osea es la posición 2
    location.href='http://www.infiernorojo.com/independiente/';
   }
}

[url]http://jsfiddle.net/YZjzK/[/url]

Funciona perfecto pero puede ser que sea solo con un select y no con dos...o es que sigo errandole

dontexplain · #12 (**permalink**) 29/03/2013, 12:51

Para que te funcione la redirección tienes que llamar a la función de alguna forma.

En tu código tienes la función declarada pero no la llamas.

La idea es que la llamada se realice al cambiar (change) la opción del select (al desplegarlo y elegir una opción), para ello es fundamental que añadas onchange al select susodicho.

Por ejemplo, en el caso del segundo select, imprescindible que haya un onchange (y añadir los option de cierre)

Código HTML:

Ver original<SELECT NAME="player" onchange="redireccionar()">
<option>1</option>
<option>2</option>
<option>3</option>
</SELECT>

Puede el select comenzar vacío y tú rellenar las opciones, pero el elemento <select> mientras exista ha de tener esa propiedad asignada.