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 multipleatributo 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 HTMLSelectElementtipo
Para interagir com <select>o elemento em JavaScript, você usa o HTMLSelectElementtipo.
O HTMLSelectElementtipo tem as seguintes propriedades úteis:
selectedIndex– retorna o índice baseado em zero da opção selecionada. OcorreselectedIndexse-1nenhuma opção estiver selecionada. Se o<select>elemento permitir seleções múltiplas,selectedIndexretornará o valorvalueda primeira opção.value– retorna avaluepropriedade do primeiro elemento de opção selecionado, se houver. Caso contrário, retorna uma string vazia.multiple– retornatruese o<select>elemento permitir seleções múltiplas. É equivalente aomultipleatributo.
A selectedIndexpropriedade
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 valuepropriedade
A valuepropriedade do <select>elemento depende do elemento e de seu atributo <option>HTML :multiple
- Se nenhuma opção for selecionada, a
valuepropriedade da caixa de seleção será uma string vazia. - Se uma opção estiver selecionada e tiver um
valueatributo, avaluepropriedade da caixa de seleção será o valor da opção selecionada. - Se uma opção estiver selecionada e não tiver nenhum
valueatributo, avaluepropriedade da caixa de seleção será o texto da opção selecionada. - Se diversas opções forem selecionadas, a
valuepropriedade 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
valuepropriedade do<select>ficará vazia. - Se você selecionar a última opção, a
valuepropriedade da caixa de seleção éEmber.jsporque a opção selecionada não possui nenhumvalueatributo. - Se você selecionar a segunda ou terceira opção, a propriedade value será
"1"ou"2".
O HTMLOptionElementtipo
Em JavaScript, o HTMLOptionElementtipo representa o <option>elemento.
O HTMLOptionElementtipo tem as seguintes propriedades úteis:
index– o índice da opção dentro da coleção de opções.selected– retornatruequando a opção é selecionada. Você configura esta propriedade paratrueselecionar uma opção.text– retorna o texto da opção.value– retorna o atributo de valor HTML.
O <select>elemento possui a optionspropriedade que permite acessar as opções de coleção:
selectBox.optionsLinguagem de código: CSS ( css )Por exemplo, para acessar o texte valueda 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 texte valueda opção selecionada através de texte valuepropriedades:
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 selectedpropriedade 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 Arrayobjeto.
Para emprestar esses métodos do Arrayobjeto, 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 textpropriedade 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 omultipleatributo ao<select>elemento para permitir seleções múltiplas. - O
HTMLSelectElementrepresenta o<select>elemento. UseselectedIndexevaluepara obter o índice e o valor da opção selecionada. - O
HTMLOptionElementrepresenta o<option>elemento. Se a opção for selecionada, aselectedpropriedade é verdadeira. As propriedadesselectedTexteselectedValueretornam otextevalueda opção selecionada.
