Lista select - JavaScript

Para criar uma lista, utilizamos o elemento HTML select. Com ele, é possível criar tanto listas suspensas quanto listas com seleção única ou múltipla. Por exemplo, uma lista padrão:

<select name="language" size="4">
  <option value="JS" selected="selected">JavaScript</option>
  <option value="Java">Java</option>
  <option value="C#">C#</option>
  <option value="C++">C++</option>
</select>

O atributo size define quantos itens da lista serão exibidos simultaneamente. O valor size="1" mostra apenas um item, transformando a lista em suspensa. Ao definir o atributo multiple no elemento select, é possível selecionar múltiplos itens simultaneamente.

Cada item da lista é representado pelo elemento HTML option, que possui uma etiqueta visível e um valor associado ao atributo value.

No JavaScript, o elemento select é representado pelo objeto HTMLSelectElement e o option por HTMLOptionElement ou simplesmente Option.

Todos os itens de uma lista no JavaScript são acessíveis através da coleção options. Cada objeto HTMLOptionElement possui propriedades como index (índice na coleção options), text (texto exibido) e value (valor do item). Por exemplo, vamos obter o primeiro item da lista e exibir todas as informações sobre ele por meio de suas propriedades:

<form name="myForm">
  <select name="language" size="4">
      <option value="JS" selected="selected">JavaScript</option>
      <option value="Java">Java</option>
      <option value="CS">C#</option>
      <option value="CPP">C++</option>
  </select>
</form>
<script>
const firstLanguage = document.myForm.language.options[0];
console.log("Index:", firstLanguage.index);
console.log("Text:", firstLanguage.text);
console.log("Value:", firstLanguage.value);
</script>

Outra maneira de obter um elemento da lista por índice é usando o método item(), ao qual se passa o índice do elemento:

const firstLanguage = myForm.language.item(0);
console.log("Index:", firstLanguage.index);
console.log("Text:", firstLanguage.text);
console.log("Value:", firstLanguage.value);

Gerenciamento Dinâmico da Lista

No JavaScript, podemos não apenas recuperar elementos, mas também gerenciar a lista dinamicamente. Por exemplo, vamos implementar a adição e remoção de objetos da lista:

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <title>Programício</title>
  </head>
  <body>
  <form name="myForm">
      <select name="language" size="5">
          <option value="JS" selected="selected">JavaScript</option>
          <option value="Java">Java</option>
          <option value="CS">C#</option>
          <option value="CPP">C++</option>
      </select>
      <p><input type="text" name="textInput" placeholder="Digite o texto" /></p>
      <p><input type="text" name="valueInput" placeholder="Digite o valor" /></p>
      <p>
          <input type="button" name="addButton" value="Adicionar" />
          <input type="button" name="removeButton" value="Remover" />
      </p>
  </form>
   
  <script>
  const myForm = document.myForm;
  const addButton = myForm.addButton,
      removeButton = myForm.removeButton,
      languagesSelect = myForm.language;

  // função para adicionar um elemento
  function addOption() {
      const text = myForm.textInput.value;
      const value = myForm.valueInput.value;
      const newOption = new Option(text, value);
      languagesSelect.options[languagesSelect.options.length] = newOption;
  }

  // função para remover um elemento
  function removeOption() {
      const selectedIndex = languagesSelect.selectedIndex;
      languagesSelect.options[selectedIndex] = null;
  }
   
  addButton.addEventListener("click", addOption);
  removeButton.addEventListener("click", removeOption);
  </script>
  </body>
  </html>

Neste exemplo, criamos um formulário com uma lista suspensa e dois campos de texto para inserir o texto e o valor do novo item. Os botões "Adicionar" e "Remover" são responsáveis por adicionar e remover itens da lista, respectivamente.

A função responsável por adicionar é addOption, na qual obtemos os valores inseridos nos campos de texto, criamos um novo objeto Option e o adicionamos ao array options do objeto da lista.

A função responsável pela remoção é removeOption, na qual simplesmente obtemos o índice do elemento selecionado por meio da propriedade selectedIndex e, na coleção options, definimos o valor nesse índice como null.

Adicionando e Removendo Itens da Lista Select

Como alternativa, para adicionar e remover, também podemos usar os métodos add e remove do elemento select, respectivamente, como alternativas ao método direto de manipulação de índices:

function addOption() {
  const text = myForm.textInput.value;
  const value = myForm.valueInput.value;
  const newOption = new Option(text, value);
  languagesSelect.add(newOption);
}

function removeOption() {
  languagesSelect.remove(languagesSelect.selectedIndex);
}

Eventos do Elemento select

O elemento select suporta três eventos: blur (perda de foco), focus (obtenção de foco) e change (alteração do item selecionado). Vamos explorar o uso do evento change:

<form name="myForm">
    <select name="language" size="5">
        <option value="JS" selected="selected">JavaScript</option>
        <option value="Java">Java</option>
        <option value="CS">C#</option>
        <option value="CPP">C++</option>
    </select>
</form>
<div id="selection"></div>
<script>
const languagesSelect = document.myForm.language;
const selection = document.getElementById("selection");
 
function changeOption() {
    const selectedOption = languagesSelect.options[languagesSelect.selectedIndex];
    selection.textContent = "Você escolheu: " + selectedOption.text;
}
 
languagesSelect.addEventListener("change", changeOption);
</script>

Selecionando Elementos da Lista Select em JavaScript

Lista com Múltipla Seleção

Se o elemento select possui o atributo multiple, a lista permite a seleção de múltiplos itens. Nesse caso, para obter todos os itens selecionados, usamos a propriedade selectedOptions, que é uma coleção do tipo HTMLCollection contendo os itens selecionados:

<form name="myForm">
  <select name="languages" multiple>
      <option value="JS">JavaScript</option>
      <option value="Java">Java</option>
      <option value="CS">C#</option>
      <option value="CPP">C++</option>
  </select>
</form>
<div id="selection"></div>
<script>
const languages = document.myForm.languages;
const selection = document.getElementById("selection");

function changeOption() {
  while (selection.firstChild) {
      selection.removeChild(selection.firstChild);
  }
  const options = languages.selectedOptions;
  for (let i = 0; i < options.length; i++) {
      const option = options[i].text;
      const div = document.createElement("div");
      const optionText = document.createTextNode(option);
      div.appendChild(optionText);
      selection.appendChild(div);
  }
}
languages.addEventListener("change", changeOption);
</script>

Neste caso, no manipulador do evento change, passamos por cada elemento selecionado e para cada um criamos um nó de texto, que colocamos em um elemento div. Esse div, por sua vez, é colocado no elemento selection na página web.

Processando Seleção de Itens de uma Lista com Múltipla Escolha em JavaScript