Selecionar uma option pelo texto com JavaScript

Neste artigo você vai aprender a como selecionar uma option pelo texto com JavaScript, mudando ela para selecionada no input de select

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender a mudar a opção selecionada com JavaScript!

Para resolver este problema é bem simples, vamos ter que seguir alguns passos

1. Definir o texto que deve ser encontrado no select;
2. Fazer um loop em todas as opções;
3. Checar com um if se a opção atual é a alvo;
4. Selecionar a opção encontrada

Então vamos ver como isso fica no código:

<select name="carros" id="carros">
  <option value="bmw">BMW 2.4</option>
  <option value="ford">Ford 2.0</option>
  <option value="ferrari">Ferrari 3.0</option>
</select>

Este será o nosso HTML, neste exercício vamos selecionar o Ford 2.0 pelo seu texto

Agora veja o código JavaScript:

var text = 'Ford 2.0';
var select = document.querySelector('#carros');
for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].text === text) {
        select.selectedIndex = i;
        break;
    }
}

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Selecionamos o texto na variável text, e criamos o loop for, baseado na quantidade de opções do select que está na variável select

Podemos encontrar a quantidade de opções com: select.options.length

Feito o loop, procuramos pelo texto com o if, acessando o texto de cada um dos options com a propriedade text

Quando o texto é encontrado, marcamos a option como selecionada com a propriedade selectIndex

E utilizamos um break para ejetar do loop, fazendo com que não gastemos mais memória desnecessariamente se houver mais opções, aumentando a performance do nosso código

Conclusão

Neste artigo criamos uma funcionalidade para selecionar uma option pelo texto com JavaScript

Utilizamos um loop for em todas as opções do select e verificamos se o texto bate com o das opções

Caso sim, utilizamos selectIndex para alterar a opção selecionada

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E se o texto não for encontrado?

Repara que o código acima assume que o texto SEMPRE existe no select

Mas e se alguém mudar as options depois, ou se o texto vier de um lugar dinâmico? Aí o loop roda inteiro e nada acontece, sem nenhum aviso

O jeito mais simples de resolver é marcar que achou:

var text = 'Ford 2.0';
var select = document.querySelector('#carros');
var encontrou = false;

for (var i = 0; i < select.options.length; i++) {
select.selectedIndex = i;
encontrou = true;
break;
}
}

if (!encontrou) {
console.log('Nenhuma option com o texto: ' + text);
}

Agora tu sabe quando a busca falhou, e pode mostrar uma mensagem, manter a opção antiga ou o que fizer sentido no teu projeto

Tome cuidado com isso, é o erro mais comum nesse tipo de código 🙂

Versão moderna com Array.from e findIndex:

O for funciona liso, mas dá pra deixar isso bem mais curto

Antes um detalhe importante: select.options NÃO é um array de verdade, é uma coleção do DOM

Por isso métodos como find e findIndex não existem nela direto, a gente converte antes com Array.from

var select = document.querySelector('#carros');

var indice = Array.from(select.options).findIndex(function (option) {
return option.text === 'Ford 2.0';
});

if (indice > -1) {
select.selectedIndex = indice;
}

O findIndex devolve o índice do primeiro item que bate, e devolve -1 se não achar nada

Por isso o if, sem ele tu correria o risco de jogar -1 no selectedIndex e deixar o select sem nenhuma opção marcada

Mesma ideia do for, bem menos linha 😀

Comparando o texto sem sofrer com maiúsculas e espaços:

O === compara o texto EXATO

Aí um espaço sobrando no HTML, ou um "ford 2.0" minúsculo vindo de um input, já quebra a comparação e tu jura que o código está errado

Já me ferrei uma vez por causa de um espacinho invisível haha

A solução é normalizar os dois lados antes de comparar:

var text = ' ford 2.0 ';
var select = document.querySelector('#carros');

var alvo = text.trim().toLowerCase();

for (var i = 0; i < select.options.length; i++) {
select.selectedIndex = i;
break;
}
}

O trim tira os espaços das pontas e o toLowerCase deixa tudo minúsculo

Assim "Ford 2.0", "FORD 2.0" e " ford 2.0 " caem todos no mesmo lugar

Mudei o select por JavaScript e nada acontece, e agora?

Esse aqui pega muita gente, se liga

Quando tu muda o select pelo código, o navegador NÃO dispara o evento change sozinho

O evento change nasce da interação do usuário, então qualquer função que tu tenha pendurada nele fica quietinha:

select.addEventListener('change', function () {
console.log('mudou para: ' + select.value);
});

// muda a option, mas o listener acima não roda
select.selectedIndex = 1;

Se tu precisa que a reação aconteça, dispara o evento na mão depois de mudar:

select.selectedIndex = 1;
select.dispatchEvent(new Event('change'));

Agora sim o teu listener é chamado e o resto da tela reage normal

Muito útil em formulário com campos dependentes, tipo estado e cidade

E se eu quiser selecionar pelo value?

Se o que tu tem em mãos é o value e não o texto, nem precisa de loop nenhum

Dá pra atribuir direto na propriedade value do select:

var select = document.querySelector('#carros');

select.value = 'ford';

O navegador procura a option com aquele value e marca ela pra ti

Se nenhuma option tiver esse value, o select fica sem opção selecionada, então vale conferir depois se select.selectedIndex continua maior que -1

Regra prática: value tu resolve em uma linha, texto tu resolve com o loop lá de cima 😀

Perguntas frequentes

Posso usar textContent no lugar de text?

Pode, o textContent também devolve o conteúdo escrito dentro da option

A propriedade text é a que existe especificamente no elemento option, então ela é a mais direta aqui

E se duas options tiverem o mesmo texto?

Com o break, o loop para na PRIMEIRA que bater e ignora as outras

Se tu precisa da última, é só tirar o break e deixar o loop rodar até o fim

Dá pra marcar a option sem usar selectedIndex?

Dá, cada option tem a propriedade selected:

O efeito é o mesmo em um select comum, escolhe o que te agrada mais

Funciona com select multiple?

O selectedIndex marca uma opção só

Em select multiple o caminho é marcar option.selected = true em cada uma que tu quer, sem o break no loop