Programação

Dropdown com redirecionamento

Salve salve galera, no tutorial de hoje vou mostrar como criar um dropdown com redirecionamento, ou seja, quando for escolhida uma opção no dropdown ele faz um redirect, automaticamente pra página que você quiser.

Mas por que eu usaria um dropdown com redirecionamento no meu site/blog? Imagine um site de operadora de telefone, ao acessar operadora.com.br tem uma landing page, perguntado qual região você está, pois pra cada região tem uma promoção diferente, então ao escolher (Sul) você será redirecionado para operadora.com.br/sul esse é apenas um exemplo de uso e você pode adaptar conforme sua necessidade.

Veja aqui o exemplo

Como criar um dropdown com redirecionamento

1ª Passo – o HTML

Bom, vamos criar um select com as opções Centro-Oeste, Nordeste, Norte, Sul e Sudeste.

<select id="regiao" name="regiao">
  <option value="centro-oeste">Centro-Oeste</option>
  <option value="nordeste">Nordeste</option>
  <option value="norte">Norte</option>
  <option value="sul">Sul</option>
  <option value="sudeste">Sudeste</option>
</select>

Agora com o select criado, você percebeu que nem foi preciso um formulário, apenas o dropdown, agora vamos ao próximo passo.

2º Passo – O jQuery

Caso você já esteja chamando o jQuery na sua página, clique aqui e vá para o passo 3. Vamos inserir o jQuery na página e você pode colocar entre as tags < head >< /head > ou no rodapé do site (forma recomendada). Veja abaixo que estou usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Se precisar, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

3º Passo – O script para redirecionamento com dropdown

Agora, vamos ao script que nada mais é que um change do jQuery no select e alguns if´s e else´s dentro desse change, borá ver esse código.

<script type="text/javascript">
 var $n = jQuery.noConflict();
// Use jQuery com a variavel $n(...)
$n(document).ready(function(){
$n('#regiao').change(function() {
 // REDIRECT PRA REGIÃO CENTRO-OESTE
 if ($n(this).val() == "centro-oeste") { //verifica se o valor escolhido é centro-oeste
  window.open('http://pt.wikipedia.org/wiki/Regiao_Centro-Oeste_do_Brasil','_blank');// se for centro-oeste redireciona par url
 }
 // REDIRECT PRA REGIÃO NORTE
 else if ($n(this).val() == "nordeste") { //verifica se o valor escolhido é nordeste
  window.open('http://pt.wikipedia.org/wiki/Regiao_Nordeste_do_Brasil','_blank');// se for nordeste redireciona par url
 }
 // REDIRECT PRA REGIÃO NORTE
 else if ($n(this).val() == "norte") { //verifica se o valor escolhido é norte
  window.open('http://pt.wikipedia.org/wiki/Regiao_Norte_do_Brasil','_blank'); // se for norte redireciona par url
 }
 // REDIRECT PRA REGIÃO SUDESTE
 if ($n(this).val() == "sudeste") { //verifica se o valor escolhido é sudeste
   window.open('http://pt.wikipedia.org/wiki/Regiao_Sudeste_do_Brasil','_blank');// se for sudeste redireciona par url
 }
  // REDIRECT PRA REGIÃO SUL
 if ($n(this).val() == "sul") { //verifica se o valor escolhido é sul
   window.open('http://pt.wikipedia.org/wiki/Regiao_Sul_do_Brasil','_blank'); // se for sul redireciona par url
 }
 else { 
 //se não for nenhuma das opções acima não acontece nada
}
});
});
</script>

Bom o código acima está todo comentado então não tem muito o que explicar, se for usar pra redirecionar para mesma página use _self ao invés de _blank e mesmo assim use URL´S absolutas (http://seudominio.com.br).

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Você também pode ver esses outros tutoriais relacionados com dropdown.

Personalizar Dropdown com CSS
Dropdown com Sim/Não para exibir o conteúdo

Agora basta personalizar conforme sua necessidade, redirecionando para as URL´S para onde você quiser, simples né? E você o que achou do tutorial de como criar dropdown com redirecionamento. Comente.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado