Pegar todas as options de um select com JavaScript

Neste artigo você vai aprender a como pegar todas as options de um select, utilizando a linguagem JavaScript

Fala programador(a), beleza? Bora aprender mais sobre select, option e JavaScript!

Para checar ao resultado que precisamos vamos trabalhar com DOM e alguns outros recursos de JS

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Primeiramente precisamos selecionar o elemento

Depois acessamos a propriedade options, que contém todas as opções, porém ainda não é um array como queremos

Podemos transformar em um array com o Spread Operator, e assim teremos uma lista com as opções

Por fim é possível fazer um loop com um for ou outras funções como map

Veja o código completo:

const select = document.querySelector("#my-select")

const options = [...select.options]

options.forEach((option) => {
	console.log(option.value)
})

Neste caso criei um select com options que contém marcas de carro

Selecionamos o elemento através de querySelector, criamos o array com o spread operator e por fim exibimos os valores com forEach

O resultado final é este:

"BMW"
"Mercedez"
"Ferrari"

Conclusão

Neste artigo você aprendeu a como pegar todas as options de um select com JS

Precisamos selecionar o select, formar um array com o spread, e depois podemos acessar os valores das options

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!