20.04.2025

Trabalhando com Múltiplo Select em JavaScript: Obtendo Valores

Resposta Rápida

Você pode obter instantaneamente valores selecionados usando esta linha de código compacta em JavaScript:

let selecionados = [...document.querySelector('#selectId').selectedOptions].map(opt => opt.value);

Substitua '#selectId' pelo ID do seu elemento select, e o array selecionados conterá todos os valores selecionados.

Vamos Explorar os Métodos

A solução abordada é eficiente, mas vamos entender como ela funciona e explorar maneiras alternativas de alcançar o mesmo objetivo.

Usando a Propriedade selectedOptions

O HTML5 introduz a conveniente propriedade selectedOptions:

const caixaSelect = document.getElementById('selectId');
const valoresSelecionados = Array.from(caixaSelect.selectedOptions).map(opcao => opcao.value);
// Isso é o mesmo que o anterior `selectedOptions`!

Laço Clássico

Se precisarmos trabalhar com o estilo clássico da linguagem ou com navegadores mais antigos que podem não estar familiarizados com selectedOptions, podemos usar a seguinte abordagem:

const selecionados = [];
const opcoes = document.getElementById('selectId').options;
for (let opt of opcoes) {
  if (opt.selected) selecionados.push(opt.value);
  // Olha! Os valores vão para o array se forem selecionados.
}

Mágica jQuery 🎩

Embora nosso foco principal seja em JavaScript puro, aqui está uma opção para quem prefere jQuery:

let selecionados = $('#selectId').val();
// jQuery diz: "Por que rastejar quando você pode voar?"

Gerenciando o Atributo selected

Trate o atributo selected com cuidado: ele define a escolha pré-selecionada:

document.querySelector('#selectId option').setAttribute('selected', true);
// "O primeiro está destinado a ser escolhido!"

Visualização

Imagine uma lista de múltiplo select em HTML como um pino de boliche cheio de banheiras coloridas (🛁💣):

<select multiple>
  <option value="rose">🌹 Rosa</option>
  <option value="peppermint">🌿 Hortelã</option>
  <option value="lavender">💜 Lavanda</option>
</select>

Reúna todas as banheiras selecionadas (valores) em uma cesta array:

let aromasSelecionados = Array.from(selectElement.options)
                      .filter(opcao => opcao.selected)
                      .map(opcao => opcao.value);

O que temos na cesta:

| Seus Aromas         |
| ------------------- |
| 🌹 Rosa             |
| 🌿 Hortelã         |
| (💜 Lavanda)       |

Nota: (💜 Lavanda) é incluída apenas se selecionada.

Resultado: Sua cesta de aromas! 🧺✨

JavaScript Moderno

Vamos descrever as técnicas modernas de JavaScript aplicáveis a esta tarefa.

Desestruturação com querySelectorAll

Combinando querySelectorAll e desestruturação, o código se torna moderno e legível:

const opcoes = document.querySelectorAll('#selectId option:checked');
const valores = [...opcoes].map(({ value }) => value);
// "Uau, posso fazer isso sem usar as mãos!"

Formulário Sintético com filter e map

Use filter e map para condensar e aprimorar seu código:

const opcoes = document.getElementById('selectId').options;
const selecionados = Array.from(opcoes).filter(o => o.selected).map(o => o.value);
// "Vamos levar apenas aqueles que conseguiram olhar para a alma!"

Recomendações para uma Solução Harmoniosa

• Verifique a correção do ID e assegure que o atributo multiple esteja presente no <select>.
• Defina uma seleção padrão para exibir imediatamente ao carregar a página.
• Use console.log() para verificações adicionais — é como checar os números dos bilhetes novamente após o sorteio.
• Lembre-se de que você pode precisar transpilar seu código para compatibilidade com navegadores mais antigos usando Babel ou ferramentas similares.

Dicas de Depuração

Aqui estão algumas dicas para ajudar a evitar erros.

Verificando Valores Pré-selecionados

Valores pré-selecionados podem causar confusão. Fique atento a eles:

console.log(document.getElementById('selectId').value);
// "Como você carrega antes de dormir?"

Verificando em Diferentes Navegadores

Teste seu código em diferentes navegadores e dispositivos. Faça-o universal, em vez de só funcionar no seu computador.

Recursos Úteis

1. HTMLSelectElement: A propriedade options - Web APIs | MDN — documentação oficial do MDN sobre a propriedade options.
2. .val() | jQuery API Documentation — o guia oficial do jQuery para .val(): mágica com valores.
3. javascript - Como obter todos os valores selecionados de uma lista de múltiplo select? - Stack Overflow — a comunidade Stack Overflow compartilhando experiências com listas de seleção múltipla.
4. <select>: O Elemento HTML Select - HTML: Linguagem de Marcação Hipertexto | MDN — guia completo do MDN sobre o elemento <select>.
5. Propriedades e Métodos de Formulário — explicação detalhada sobre elementos de formulários do JavaScript.info.

Video

Navigation