Como adicionar uma option a um select com JavaScript puro

Neste artigo você vai aprender a como adicionar uma option a um select com JavaScript puro, através do DOM

Fala programador(a), beleza? Bora aprender mais sobre DOM, select e também JavaScript!

Muita gente utiliza jQuery para realizar esta ação, mas temos uma forma nativa de fazer isso

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

E o melhor: é muito simples!

Vamos começar com o nosso HTML, veja:

<select name="myselect" id="myselect"></select>

Nossa missão é criar uma nova option neste select com JavaScript puro

Primeiramente devemos selecionar o elemento

Depois basta adicionar ao array de options a nova option, criando ela com a classe Option

Onde podemos inserir dois argumentos: o título da option e valor dela (atributo value)

Veja na prática a criação da nova opção:

const select = document.querySelector('#myselect');

select.options[select.options.length] = new Option('My option', 'My value');

Agora nosso select conta com uma nova option, que possui o texto de ‘My option’ e o valor de ‘My value’

E assim criamos uma option com JS puro! 🙂

Conclusão

Neste artigo você aprendeu a adicionar uma option a um select com JavaScript

Primeiramente selecionamos o elemento com querySelector, mas pode-se utilizar qualquer método de seleção

Depois atribuimos uma nova opção a este select com a classe Option, que cria uma option com texto e value

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!