Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JoaoRafael213

<select> com link

Recommended Posts

Boa noite, estou aprendendo alguns elementos do html agora e gostaria de saber como faço para colocar neste

 

<select id="grid-select-1" name="grid-select-1" data-shadow="false">
<option>Select</option>
<option value="1">teste01</option>
<option value="2">teste02</a></option>
<option value="3">teste03</a></option>
<option value="4">teste04</a></option>
</select>

 

links para quando eu escolher uma opeção eu ser redirecionado para outra página.

 

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Amigão, Bom Dia! Então, a melhor forma de fazer isso, é usando Javascript... Você irá declarar a biblioteca Jquery dentro do <head> e também ali dentro a função Javascript que ira capturar que o usuário selecionará o select, pegará o valor e fazerá uma verificação se o valor for 1 vai para que página... Abaixo eu fiz um exemplo usando o mesmo código que postou e está funcionando 100%, seria só adaptar com o seu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste Select JS e HTML</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
window.onload = function(){
	document.getElementById("grid-select-1").onchange = function(){
		var value = this.value; // Captura o Valor do Option selecionado
		if(value == 1){location.href="pagina_1.html"/* A pagina a ser redirecionado caso o valor for 1*/}
		if(value == 2){location.href="pagina_2.html"/* A pagina a ser redirecionado caso o valor for 2*/}
		if(value == 3){location.href="pagina_3.html"/* A pagina a ser redirecionado caso o valor for 3*/}
		if(value == 4){location.href="pagina_4.html"/* A pagina a ser redirecionado caso o valor for 4*/}
	}
}
</script>
</head>

<body>
<select id="grid-select-1" name="grid-select-1" data-shadow="false">
	<option>Select</option>
	<option value="1">teste01</option>
	<option value="2">teste02</a></option>
	<option value="3">teste03</a></option>
	<option value="4">teste04</a></option>
</select>
</body>
</html>

Boa Sorte :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.