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;
    }
}

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