select que on change cambie de html

grafico2 · #1 (**permalink**) 26/01/2009, 02:37

Hola,
como puedo hacer un listado en un select y que al cambiar de seleccion se me abra un html u otro??
Me explico:

1) Coloco un select con 4 opciones:
<select name="select" id="select">
<option>001</option>
<option>002</option>
<option>003</option>
<option>004</option>
</select>
2) Quiero que segun el usuario cambie de opcion en el despleglable se le abra un html
¿se puede hacer on change? o el usuario tendria que usar el boton de enviar?
3) Que codigo necesito para que se abra un html distinto para cada opcion??

Gracias

caricatos · #2 (**permalink**) 26/01/2009, 02:52

Hola:

Con onchange sería, poniendo las url's en los values de los options y así:
<select onchange="location.href = this.value"...

Pero dependerías de javascript, creo que mejor sería también un botón del tipo submit y ese onchange que envíe el form...
onchange="this.form.submit()"

Si lo envías a un php tan solo necesitarías una línea:
<? header("Location:" .$_GET["select"]); ?>

Supuestamente usando el método get.

Saludos

grafico2 · #3 (**permalink**) 26/01/2009, 03:05

Muchas Gracias Caricatos por tu respuesta,pero me ha parecido mas secillo esto:

<select name="miSelect" id="idmiSelect" onChange="window.location.href='www.miweb.es/'+document.getElementById(this.id).value">
<option value="pag1.html">pag1</option>
<option value="pag2.html">pag2</option>
....
</select>

Muchas Gracias, un saludo

quimfv · #4 (**permalink**) 26/01/2009, 03:19

Que rápidos son... estaba elaborando una respusta con varias opciones...

Quim

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" type="text/JavaScript">
function redirige(obj){
	var opcion=obj[obj.selectedIndex].value;
	if (opcion!=0){
		switch (opcion){
			case "1":
			    document.location.href="html1.html";
			break;
			case "2":
			    document.location.href="html2.html";
			break;
			case "3":
			    document.location.href="html3.html";
			break;
			case "4":
			    document.location.href="html4.html";
			break;
		}
	}
}
function redirige2(obj){
	var opcion=obj[obj.selectedIndex].value;
	if (opcion!=0){
		switch (opcion){
			case "1":
			    window.open("html1.html",'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "2":
			    window.open("html2.html",'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "3":
			    window.open("html3.html",'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "4":
			    window.open("html4.html",'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
		}
	}
}
function redirige3(obj){
	var opcion=obj[obj.selectedIndex].value;
	if (opcion!=0){
		switch (opcion){
			case "1":
			    window.open("html1.html",'mywin'+opcion,'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "2":
			    window.open("html2.html",'mywin'+opcion,'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "3":
			    window.open("html3.html",'mywin'+opcion,'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
			case "4":
			    window.open("html4.html",'mywin'+opcion,'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
			break;
		}
	}
}
</script>
<body>
A la misma ventana <select name="select" id="select" onChange="redirige(this)">
<option value="0">Elige una</option>
<option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
<option value="4">004</option>
</select>
<br>
A una ventana nueva <select name="select2" id="select2" onChange="redirige2(this)">
<option value="0">Elige una</option>
<option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
<option value="4">004</option>
</select>
<br>
A muchas ventanas nuevas <select name="select2" id="select2" onChange="redirige3(this)">
<option value="0">Elige una</option>
<option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
<option value="4">004</option>
</select>
</body>
</html>

caricatos · #5 (**permalink**) 26/01/2009, 03:25

Cita:

Iniciado por grafico2

Muchas Gracias Caricatos por tu respuesta,pero me ha parecido mas secillo esto:

<select name="miSelect" id="idmiSelect" onChange="window.location.href='www.miweb.es/'+document.getElementById(this.id).value">
<option value="pag1.html">pag1</option>
<option value="pag2.html">pag2</option>
....
</select>

Muchas Gracias, un saludo

¡Mal, mal!... simplemente es la misma respuesta que mi primera opción (aunque algo más compleja innecesariamente), y además dependes de javascript... ya he visto que has preguntado en php, y la respuesta sin depender de javascript se ayuda de php... si dispones de php es mi segunda respuesta la mejor opción... pero la decisión, desde luego, la debes tomar tú.

Saludos

grafico2 · #6 (**permalink**) 26/01/2009, 03:29

no me riñas caricatos, no me riñas!! jop

Gracias Quimfv, es una respuesta completisima, mil gracias

caricatos · #7 (**permalink**) 26/01/2009, 03:31

Cita:

Iniciado por grafico2

no me riñas caricatos, no me riñas!! jop

Gracias Quimfv, es una respuesta completisima, mil gracias

¡Je, je!

Baku2000 · #8 (**permalink**) 12/11/2009, 12:12

estoy intentando hacer justo lo que estoy viendo en este post . lo he preguntado en PHP pero me mandan aqui xDD. Pero hay una cosa que no se hacer y querria que me dijeran si se puede hacer o no.

yo tengo esto:
<FORM name="form1" method="post" action="">
Elija un año para visualizarlo:
<select name="select_anyos" onChange="location.href=this.value">
<option value="2008.html">2008</option>
<option value="2007.html">2007</option>
<option value="2006.html">2006</option>
<option value="2005.html">2005</option>
</select>
</FORM>

y es cierto que cuando le pincho en el menu desplegable me regirige directamente a la pagina, pero es que ahi no tengo el problema, sino que yo tengo una pagina con 2 marcos:

- en el marco superior tengo el formulario que al seleccionar la opcion me tiene que abrir la pagina en el marco de abajo.

- en el marco de abajo al principio no habra nada y se mostrara la informacion al pinchar en el menu de arriba.

y es aqui donde no se unirlo.

Baku2000 · #9 (**permalink**) 14/11/2009, 13:53

alguien sabe como es dicha opcion?

livan08015 · #10 (**permalink**) 17/08/2010, 09:55

Eso está perfecto, pero en el ejemplo ya están definidos las opciones del select 2008.html, 2009.html etc y en mi caso los coge de la tabla de artículos de mi bases de datos, ya eso lo tengo o sea mi select tiene como values los artículos, el problema radica en cuando escogo el artículo a visitar me lleve a ese y no a otro.

matiasvargas85 · #11 (**permalink**) 15/01/2011, 15:59

De esta forma es la mejor manera de hacer una lista desplegable donde salen los paises y que al seleccionar un pais se abra otro html con el país seleccionado y las provincias o regiones correspondientes a ese pais??? Esta es la manera mas simple para hacer esto o hay otra mas simple??? Espero sus respuestas....gracias...y perdon por la ignorancia ya que soy nuevo en desarrollo web...

caricatos · #12 (**permalink**) 16/01/2011, 00:04

Hola:

Para cambiar la url de un (i)frame, la instrucción sería open...

onchange="window.open(this.value, 'ventana')"

Y el marco con el mismo nombre (name) que el segundo parámetro del open...

<iframe name="ventana"></iframe>

Saludos