Cómo crear una lista desplegable con enlaces y abrirlos en ventana nueva

  • Autor Autor alexsaporta
  • Fecha de inicio Fecha de inicio
A

alexsaporta

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola! Me gustaría hacer una lista desplegable dónde cada opción enlazara con un link externo y se abriera en una ventana nueva pero no consigo que las opciones enlacen. Esta es la lista que tengo preparada:

<p>Elige una opción:
<select name="X">
<option>x</option>
<option>x</option>
<option>x</option>
<option>x</option>
</select>
</p>
</select>
 
Hola amigo puedes hacer lo siguiente:

HTML: 
<select name="X" onchange="openLink(event)">
<option value="01">x</option>
<option value="02">x</option>
<option value="03">x</option>
<option value="04">x</option>
</select>

Insertar CODE, HTML o PHP: 
function openLink(event){

switch(event.value){
   case '01':
     window.open('https://google.com');
     break;
   case n
   ...
   default:
    break;
}

Espero que sea de ayuda.
 
Necesitas manejar el Javascript, para que de esta manera crees un evento y así puedas generar el listner que tienes, alfa te acaba de recomendar una buena opción, saludos!
 
Es suficiente con entender cual es la funcion de input en HTMl, puedes hacerlo con JS o con puro Html, aqui tienes un ejemplo con JS


<html>
<head>

<script LANGUAGE="JavaScript">
function abreSitio(){
var URL = "http://";
var web = document.form1.sitio.options[document.form1.sitio.selectedIndex].value;
window.open(URL+web, '_blank', '');
}
</script>

</head>
<body>

<form name="form1" target="_blank">
<select name="sitio">
<option>» Selecciona «</option>
<option value="www.google.com">Google</option>
<option value="www.yahoo.com">Yahoo</option>
<option value="www.hotmail.com">Hotmail</option>
</select>
<input type="button" value="Ir" onClick="javascript:abreSitio()">
</form>

</body>
</html>


Nota: Hazme saber si te funciona.
 
DianaSantana dijo:
Es suficiente con entender cual es la funcion de input en HTMl, puedes hacerlo con JS o con puro Html, aqui tienes un ejemplo con JS


<html>
<head>

<script LANGUAGE="JavaScript">
function abreSitio(){
var URL = "http://";
var web = document.form1.sitio.options[document.form1.sitio.selectedIndex].value;
window.open(URL+web, '_blank', '');
}
</script>

</head>
<body>

<form name="form1" target="_blank">
<select name="sitio">
<option>» Selecciona «</option>
<option value="www.google.com">Google</option>
<option value="www.yahoo.com">Yahoo</option>
<option value="www.hotmail.com">Hotmail</option>
</select>
<input type="button" value="Ir" onClick="javascript:abreSitio()">
</form>

</body>
</html>


Nota: Hazme saber si te funciona.
Hacer clic para expandir...

Al final opté por esto, grande! Me funciona perfectamente y además se abre en otra pestaña como quería. Muchísimas gracias amigo!

- - - Actualizado - - -

Bueno...editandolo me falla algo y no se el que porque parece que está todo bien. Esto es lo que pongo:


<html>
<head>
<script LANGUAGE="JavaScript">
function abreSitio(){
var URL = "http://";
var web = document.form1.sitio.options[document.form1.sitio.selectedIndex].value;
window.open(URL+web, '_blank', '');
}
</script>
</head>
<body>
<form name="form1" target="_blank">
<select name="sitio">
<option>» Selecciona «</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/16_21_56_981_Pliego_prescripciones_administrativas_consurso_electricidad_.pdf">Pliego prescripciones administrativas concurso electricidad</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/16_23_05_685_Pliego_prescripciones_t_cnicas_consurso_electricidad_.pdf">Pliego prescripciones técnicas concurso electricidad</option>
<option value="http://www.reciplasa.es/wp-content/uploads/2013/12/17_11_58_221_RECIPLASA_12_01_16_Nota_Aclaratoria_CONCURSO_ELECTRICIDAD_FIRMADA.pdf">Nota aclaratoria Concurso electricidad</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/11_57_01_61_Acuerdo_de_Adjudicaci_n_provisional_Concurso_electricidad.pdf">Acuerdo adjudicación definitiva Concurso electricidad*</option>
<option value="http://www.reciplasa.es/wp-content/uploads/2013/12/09_37_12_473_Publicaci_n_Anuncio_Diari😵ficial_Uni_n_Europea_Concurso_Electricidad.pdf">Publicación anuncio Diario Oficial Unión Europea</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_14_23_202_14_11_2016_Anuncio_formalizaci_n_contratos_Tte._y_eliminaci_n_BOE-1.pdf">Opción 1</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_14_23_202_14_11_2016_Anuncio_formalizaci_n_contratos_Tte._y_eliminaci_n_BOE-1.pdf">Opción 2</option>
<optgroup label="Otros">
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_32_01_403_Reciplasa_BOE.pdf">Publicación BOE</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/12_23_36_862_ACLARACIONES_SOLICITADAS.pdf">Aclaraciones solicitadas</option>
</optgroup>
<optgroup label="Transporte Onda/Cervera">
</optgroup>
<optgroup label="Servicios">
</optgroup>
</select>
<input type="button" value="Ir" onClick="javascript:abreSitio()">
</form>
</body>
</html>
 
Última edición:
Perfecto! me alegro te haya servido 🙄
 
alexsaporta dijo:
Si! Pero editandolo no me enlaza dónde debería! 🙁
Hacer clic para expandir...

Ya se porque, el problema es que en:

* Primero hay enlaces que no funcionan, (puedes probarlo copiando y pegando el enlace en otra ventana del navegador).
* Segundo en la opcion que se llama : Nota aclaratoria Concurso electricidad, pusiste el link con http: No deberias, porque en la funcion JavaScript esta que le agregue el http por defecto para la URL, o sea debes quitarle esta parte y dejarlo desde www.blabla

Aqui esta el codigo para que compruebes los errores y pruebes

<html>
<head>
<script LANGUAGE="JavaScript">
function abreSitio(){
var URL = "http://";
var web = document.form1.sitio.options[document.form1.sitio.selectedIndex].value;
window.open(URL+web, '_blank', '');
}
</script>
</head>
<body>
<form name="form1" target="_blank">
<select name="sitio">
<option>» Selecciona «</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/16_21_56_981_Pliego_prescripciones_administrativas _consurso_electricidad_.pdf">Pliego prescripciones administrativas concurso electricidad</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/16_23_05_685_Pliego_prescripciones_t_cnicas_consur so_electricidad_.pdf">Pliego prescripciones técnicas concurso electricidad</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/17_11_58_221_RECIPLASA_12_01_16_Nota_Aclaratoria_CONCURSO_ELECTRICIDAD_FIRMADA.pdf">Nota aclaratoria Concurso electricidad</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/11_57_01_61_Acuerdo_de_Adjudicaci_n_provisional_Co ncurso_electricidad.pdf">Acuerdo adjudicación definitiva Concurso electricidad*</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/09_37_12_473_Publicaci_n_Anuncio_Diari😵ficial_Un i_n_Europea_Concurso_Electricidad.pdf">Publicación anuncio Diario Oficial Unión Europea</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_14_23_202_14_11_2016_Anuncio_formalizaci_n_cont ratos_Tte._y_eliminaci_n_BOE-1.pdf">Opción 1</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_14_23_202_14_11_2016_Anuncio_formalizaci_n_cont ratos_Tte._y_eliminaci_n_BOE-1.pdf">Opción 2</option>
<optgroup label="Otros">
<option value="www.reciplasa.es/wp-content/uploads/2013/12/10_32_01_403_Reciplasa_BOE.pdf">Publicación BOE</option>
<option value="www.reciplasa.es/wp-content/uploads/2013/12/12_23_36_862_ACLARACIONES_SOLICITADAS.pdf">Aclarac iones solicitadas</option>
</optgroup>
<optgroup label="Transporte Onda/Cervera">
</optgroup>
<optgroup label="Servicios">
</optgroup>
</select>
<input type="button" value="Ir" onClick="javascript:abreSitio()">
</form>
</body>
</html>
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

P
Cómo tomar valor de lista desplegable con PHP?
Respuestas
3
Visitas
4K
slashmayax
S
K
Crear lista desplegable con buscador y enlaces personalizados
Respuestas
12
Visitas
2K
rayden
rayden
epsilo99
Lista desplegable para seleccionar múltiples categorías en Wordpress
Respuestas
0
Visitas
575
epsilo99
epsilo99
Atrás
Arriba