Trabalhando com Lista select em 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
.
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>
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.