Select con link
Quiero hacer un desplegable de manera que al seleccionar una opción de la lista me vaya a una url (diferente para cada
Opción). ¿Cómo se puede hacer?
Opción). ¿Cómo se puede hacer?
5 Respuestas
Respuesta de calipides
2
Con este código se puede hacer lo que quieres:
<form>
<select name="area" onChange="location = form.area.options[form.area.selectedIndex].value;">
<option value="Seleccione una opción"> Seleccione una url</option>
<option value="http://www.google.com"> Google</option>
<option value="http://www.yahoo.com"> Yahoo!</option>
</select>
</form>
Lo que no tengo claro es como hacer que se abra en una nueva página (usando target="_blank")
Suerte!
<form>
<select name="area" onChange="location = form.area.options[form.area.selectedIndex].value;">
<option value="Seleccione una opción"> Seleccione una url</option>
<option value="http://www.google.com"> Google</option>
<option value="http://www.yahoo.com"> Yahoo!</option>
</select>
</form>
Lo que no tengo claro es como hacer que se abra en una nueva página (usando target="_blank")
Suerte!
Respuesta de magnoliart
3
Es sencillo, mira pon este código html, es un formulario realmente:
<!-- esto va dentro de <head> y </head> -->
<script>
function nav(value) {
if (value != "") { location.href = value; }
}
</script>
<!-- hasta aquí -->
<!-- y lo que sigue dentro de body -->
<FORM name=combos>
<select onChange=nav(this.value) name=combo1 class=menudespl width="200">
<OPTION selected>Selecciona un destino</OPTION>
<OPTION value="tupagina.html">Pagina 1</OPTION>
<OPTION value="http://www.dominio.com/tupagina2.html">Pagina 2</OPTION>
</FORM>
Y añade tantas etiquetas <option> como desees!
Este es el menú desplegable sencillo, si quieres más complicaciones, te recomiendo que vayas a esta dirección:
http://javascript.internet.com
<!-- esto va dentro de <head> y </head> -->
<script>
function nav(value) {
if (value != "") { location.href = value; }
}
</script>
<!-- hasta aquí -->
<!-- y lo que sigue dentro de body -->
<FORM name=combos>
<select onChange=nav(this.value) name=combo1 class=menudespl width="200">
<OPTION selected>Selecciona un destino</OPTION>
<OPTION value="tupagina.html">Pagina 1</OPTION>
<OPTION value="http://www.dominio.com/tupagina2.html">Pagina 2</OPTION>
</FORM>
Y añade tantas etiquetas <option> como desees!
Este es el menú desplegable sencillo, si quieres más complicaciones, te recomiendo que vayas a esta dirección:
http://javascript.internet.com
Respuesta de juanceer
2
Disculpa la demora, aquí te envío una muestra:
También se puede hacer lo mismo pero que se acceda al enlace luego de clickear a un botón.
<form method="post" action="">
<div align="center">
<p>
<select name="select" size="1" select
style="FONT-SIZE: 10px; COLOR: #000000; BACKGROUND-COLOR: rgb(255,255,255)"
onChange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option selected>Entidades gubernamentales nacionales</option>
<option value="http://www.inta.gov.ar">Instituto Nacional de Tecnología
Agropecuaria</option>
<option value="http://www.senasa.gov.ar">SENASA</option>
<option value="http://siiap.sagyp.mecon.ar">Sec de Agricultura, Ganadería,
Pesca y Alimentación</option>
<option value="http://www.afip.gov.ar">AFIP - DGI</option>
<option value="http://www.bcra.gov.ar">Banco Central de la R.A.</option>
<option value="http://www.indec.mecon.ar">INDEC</option>
</select>
</p>
</div>
</form>También se puede hacer lo mismo pero que se acceda al enlace luego de clickear a un botón.
Respuesta de _german_
1
<html>
<head>
<title>Pagina ejemplo</title>
</head>
<body>
<select name="seleccion" onchange="document.location=seleccion.value">
<option selected>Selecciona una opción</option>
<option value="http://www.unaweb.com">Opcion1</option>
<option value="http://www.otraweb.com">Opcion2</option>
<option value="http://www.unaultimaweb.com">Opcion3</option>
</select>
</body>
</html>
<head>
<title>Pagina ejemplo</title>
</head>
<body>
<select name="seleccion" onchange="document.location=seleccion.value">
<option selected>Selecciona una opción</option>
<option value="http://www.unaweb.com">Opcion1</option>
<option value="http://www.otraweb.com">Opcion2</option>
<option value="http://www.unaultimaweb.com">Opcion3</option>
</select>
</body>
</html>
Respuesta de miguelete
Procesando el SELECT con el evento onChange de forma parecida a esto:
<FORM name="FORMULARIO">
<SELECT name ="DESPLEGABLE" onChange='location.replace(document.FORMULARIO.DESPLEGABLE.value);'>
<OPTION value="url_1">URL_1
<OPTION value="url_2">URL_2
...
</SELECT>
<FORM name="FORMULARIO">
<SELECT name ="DESPLEGABLE" onChange='location.replace(document.FORMULARIO.DESPLEGABLE.value);'>
<OPTION value="url_1">URL_1
<OPTION value="url_2">URL_2
...
</SELECT>