Vamos entender como gerenciar < selecione > opção em JavaScript neste tutorial.
Opção de seleção de HTML
Uma opção nos facilita a lista de opções. Permite-nos escolher uma ou mais opções. Usamos os elementos e para formar uma opção.
Por exemplo:
Red Yellow Green Blue
A opção nos permite escolher uma opção de cada vez mencionada acima.
Se desejarmos mais de uma seleção, podemos incluir o atributo em < múltiplo >elementos abaixo:
enum tostring java
Red Yellow Green Blue
Tipo HTMLSelectElement
Usamos o tipo HTMLSelectElement para interagir com a opção em JavaScript.
O tipo HTMLSelectElement contém os seguintes atributos úteis:
propriedade selectIndex
Aplicamos a API DOM como querySelector() ou getElementById() .
O exemplo indica como obter o índice da opção selecionada mencionado abaixo:
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; Como funciona:
- Inicialmente, selecione os componentes e com a ajuda do método querySelector().
- Depois disso, vincule o ouvinte de evento click a este botão e exiba o índice selecionado com a ajuda do método alert() se o botão for pressionado.
propriedade de valor
A propriedade value do elemento depende do componente e do atributo múltiplo de seu HTML:
- A propriedade value de uma caixa de seleção será uma string vazia quando nenhuma opção for selecionada.
- A propriedade value de uma caixa de seleção será o valor da opção escolhida quando uma opção for escolhida e contém o atributo value.
- A propriedade value de uma caixa de seleção será o texto da opção escolhida quando uma opção for escolhida e não contiver nenhum atributo de valor.
- A propriedade value de uma caixa de seleção será derivada da opção inicial selecionada em relação às duas regras anteriores quando mais de uma opção for escolhida.
Considere o exemplo abaixo:
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; Neste exemplo acima:
- O atributo value do elemento fica vazio quando selecionamos a opção inicial.
- O atributo de valor de uma caixa de seleção será Ember.js devido à opção escolhida não conter nenhum atributo de valor quando escolhemos a última opção.
- O atributo value será ‘1’ ou ‘2’ quando escolhermos a terceira ou segunda opção.
Tipo HTMLOptionElement
O tipo HTMLOptionElement ilustra o elemento em JavaScript.
Este tipo contém as seguintes propriedades:
Índice- O índice da opção dentro do grupo de opções.
Selecionado- Ele retorna um valor verdadeiro se a opção for escolhida. Definimos a propriedade selecionada como verdadeira para selecionar uma opção.
Texto- Ele retorna o texto da opção.
Valor- Ele retorna o atributo de valor do HTML.
O componente contém um atributo option que nos permite acessar as opções da coleção:
selectBox.options
Por exemplo, para acessar o valor e o texto da segunda opção, utilizamos o seguinte:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Para obter uma opção selecionada do componente junto com uma seleção individual, usamos o código abaixo:
let selectOption = selectBox.options [selectBox.selectedIndex];
Depois disso, podemos acessar o valor e o texto de uma opção selecionada por valor e propriedades do texto:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Quando o componente permite mais de uma seleção, podemos usar um atributo selecionado para determinar qual opção está selecionada:
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; No exemplo, o sb.opção é o objeto semelhante a um array. Portanto, ele não contém o método filter() igual ao objeto Array.
Para emprestar esses tipos de métodos através de um objeto array, usamos um método call(), o seguinte fornece o array de opções escolhidas:
[].filter.call(sb.options, option => option.selected)
E para obter o atributo text de qualquer opção, podemos encadear o resultado de um método filter() junto com um método map() como abaixo:
.map(option => option.text);
Para obter a opção selecionada usando for loop
Podemos usar o loop for para iterar pelas opções da lista selecionada para determinar qual é a escolhida. Uma função poderia ser descrita para retornar a referência a uma opção ou valor selecionado. O abaixo fornece a referência a uma opção selecionada:
function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>