CSS Desenvolvimento HTML

Como fazer um select mudar de URL/link

17 de fevereiro de 2020

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

mudando o link com option capa

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á!

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 é:

select mudar de pagina exemplo

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 😀

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x