Resumo : neste tutorial você aprenderá como lidar com o <select>
elemento em JavaScript.
Introdução aos elementos de seleção HTML
Um <select>
elemento fornece uma lista de opções. Um <select>
elemento permite selecionar uma ou várias opções.
Para criar um <select>
elemento, você usa os elementos <select>
e <option>
. Por exemplo:
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
Linguagem de código: HTML, XML ( xml )
O <select>
elemento acima permite selecionar uma única opção por vez.
Para habilitar múltiplas seleções, adicione um multiple
atributo ao <select>
elemento da seguinte maneira:
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
Linguagem de código: HTML, XML ( xml )
O HTMLSelectElement
tipo
Para interagir com <select>
o elemento em JavaScript, você usa o HTMLSelectElement
tipo.
O HTMLSelectElement
tipo tem as seguintes propriedades úteis:
selectedIndex
– retorna o índice baseado em zero da opção selecionada. OcorreselectedIndex
se-1
nenhuma opção estiver selecionada. Se o<select>
elemento permitir seleções múltiplas,selectedIndex
retornará o valorvalue
da primeira opção.value
– retorna avalue
propriedade do primeiro elemento de opção selecionado, se houver. Caso contrário, retorna uma string vazia.multiple
– retornatrue
se o<select>
elemento permitir seleções múltiplas. É equivalente aomultiple
atributo.
A selectedIndex
propriedade
Para selecionar um <select>
elemento, você usa a API DOM como getElementById()
ou querySelector()
.
O exemplo a seguir ilustra como obter o índice da opção selecionada:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Element Demo</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<form>
<label for="framework">Select a JS Framework</label>
<select id="framework">
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get the Selected Index</button>
</form>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
// show the selected index
alert(sb.selectedIndex);
};
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione os elementos
<button>
e<select>
usando oquerySelector()
método. - Em seguida, anexe um ouvinte de evento de clique ao botão e mostre o índice selecionado usando o
alert()
método quando o botão for clicado.
A value
propriedade
A value
propriedade do <select>
elemento depende do elemento e de seu atributo <option>
HTML :multiple
- Se nenhuma opção for selecionada, a
value
propriedade da caixa de seleção será uma string vazia. - Se uma opção estiver selecionada e tiver um
value
atributo, avalue
propriedade da caixa de seleção será o valor da opção selecionada. - Se uma opção estiver selecionada e não tiver nenhum
value
atributo, avalue
propriedade da caixa de seleção será o texto da opção selecionada. - Se diversas opções forem selecionadas, a
value
propriedade da caixa de seleção será derivada da primeira opção selecionada com base nas duas regras anteriores.
Veja o exemplo a seguir:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<link href="css/selectbox.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select a JS Framework:</label>
<select id="framework">
<option value="">Angular</option>
<option value="1">React</option>
<option value="2">Vue.js</option>
<option>Ember.js</option>
</select>
<button id="btn">Get the Selected Value</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework')
btn.onclick = (event) => {
event.preventDefault();
alert(sb.value);
};
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Neste exemplo:
- Se você selecionar a primeira opção, a
value
propriedade do<select>
ficará vazia. - Se você selecionar a última opção, a
value
propriedade da caixa de seleção éEmber.js
porque a opção selecionada não possui nenhumvalue
atributo. - Se você selecionar a segunda ou terceira opção, a propriedade value será
"1"
ou"2"
.
O HTMLOptionElement
tipo
Em JavaScript, o HTMLOptionElement
tipo representa o <option>
elemento.
O HTMLOptionElement
tipo tem as seguintes propriedades úteis:
index
– o índice da opção dentro da coleção de opções.selected
– retornatrue
quando a opção é selecionada. Você configura esta propriedade paratrue
selecionar uma opção.text
– retorna o texto da opção.value
– retorna o atributo de valor HTML.
O <select>
elemento possui a options
propriedade que permite acessar as opções de coleção:
selectBox.options
Linguagem de código: CSS ( css )
Por exemplo, para acessar o text
e value
da segunda opção, você usa o seguinte:
const text = selectBox.options[1].text;
const value = selectBox.options[1].value;
Linguagem de código: JavaScript ( javascript )
Para obter a opção selecionada de um <select>
elemento com uma única seleção, use o seguinte código:
let selectedOption = selectBox.options[selectBox.selectedIndex];
Linguagem de código: JavaScript ( javascript )
Então você pode acessar o text
e value
da opção selecionada através de text
e value
propriedades:
const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Linguagem de código: JavaScript ( javascript )
Quando um <select>
elemento permite múltiplas seleções, você pode usar a selected
propriedade para determinar quais opções serão selecionadas:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Select Box</title>
<link rel="stylesheet" href="css/selectbox.css">
</head>
<body>
<div id="container">
<form>
<label for="framework">Select one or more JS Frameworks:</label>
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
</select>
<button id="btn">Get Selected Frameworks</button>
</form>
</div>
<script>
const btn = document.querySelector('#btn');
const sb = document.querySelector('#framework');
btn.onclick = (e) => {
e.preventDefault();
const selectedValues = [].filter
.call(sb.options, option => option.selected)
.map(option => option.text);
alert(selectedValues);
};
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Neste exemplo, the sb.options
é um objeto semelhante a um array, portanto não possui os filter()
métodos como um Array
objeto.
Para emprestar esses métodos do Array
objeto, você usa o call()
método. Por exemplo, o seguinte retorna uma matriz de opções selecionadas:
[].filter.call(sb.options, option => option.selected)
Linguagem de código: PHP ( php )
E para obter a text
propriedade das opções, você encadeia o resultado do filter()
método com o map()
método, assim:
.map(option => option.text);
Linguagem de código: JavaScript ( javascript )
Resumo
- O
<select>
elemento permite selecionar uma ou várias opções. Adicione omultiple
atributo ao<select>
elemento para permitir seleções múltiplas. - O
HTMLSelectElement
representa o<select>
elemento. UseselectedIndex
evalue
para obter o índice e o valor da opção selecionada. - O
HTMLOptionElement
representa o<option>
elemento. Se a opção for selecionada, aselected
propriedade é verdadeira. As propriedadesselectedText
eselectedValue
retornam otext
evalue
da opção selecionada.