Como fazer um select mudar de URL/link
Neste artigo veremos como fazer um select mudar de link, ou seja, selecionando a opção o navegador vai mudar de URL
Fala programador, beleza? Bora aprender coisa nova!
Para resolver o problema de mudar de página com o option do select, na abordagem que escolhi, vou utilizar um pouco de JavaScript
Então teremos nossa estrutura básica de HTML e CSS (se você desejar), e depois vamos ativar o evento de onChange com JavaScript
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E neste evento faremos uma lógica para mudar de página, então vamos lá!
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Como fazer um select mudar de URL: prática
Vamos construir um HTML básico para iniciar a resolução do nosso problema, veja:
<!DOCTYPE html>
<html>
<head>
<title>Como fazer um select mudar de URL</title>
</head>
<body>
<h1>Mudar de página com Select</h1>
<select>
<option>Selecione uma opção</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.facebook.com">Facebook</option>
<option value="https://www.twitter.com">Twitter</option>
</select>
</body>
</html>Partindo disso, o que aparece no browser é:
Perceba que o atributo value dos options, já foram definidos propositalmente com os links que vamos acessar
Isso nos ajudará na parte do JavaScript, para saber qual URL é a desejada
Então vamos ao JavaScript:
let selectEl = document.getElementsByTagName('select');
selectEl[0].addEventListener('change', function() {
location.href=this.value;
});
O script é bem simples, na primeira linha definimos uma variável com o elemento do select, para poder ter a referência do evento onChange
E depois criamos um event listener com o addEventListener, que observará a mudança de options no nosso select
E com a mudança de option, pegamos o value do option e mudamos a URL para este value
E o nosso objetivo está concluido! 😀
Conclusão
Para resolver o problema de: como fazer um select mudar de URL, utilizamos uma abordagem muito prática
Com JavaScript inserimos o select numa variável, e depois monitoramos o evento de onChange e quando ele acontece mudamos a URL
E por hoje é isso, até o próximo post! 🙂
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
Seu artigo me ajudou muito 🙂
show Jeff =))
Perfeito, me poupou horas de pesquisa o/
show Luiz!