Summary: in this tutorial, you will learn how to handle the <select> element in JavaScript.
Introdução ao elemento select HTML
a <select> fornece-lhe uma lista de opções. Ele permite que você selecione uma ou várias opções.
para formar um elemento
, você usa o elemento<select> e<option> elementos., Por exemplo:
o elemento acima
permite-lhe seleccionar uma única opção de cada vez.
Se você deseja várias seleções, você pode adicionar multiple atributo <select> elemento da seguinte forma:
A HTMLSelectElement tipo
Para interagir com <select> elemento em JavaScript, você usa o HTMLSelectElement tipo.,
HTMLSelectElement tem as seguintes propriedades úteis:
-
selectedIndex– retorna o índice com base zero da opção selecionada. TheselectedIndexis-1if no option is selected. Se o elemento
permite várias selecções, o selectedIndex devolve o value da primeira opção.,
value – devolve o value propriedade do primeiro elemento de opção seleccionado, se existir um, caso contrário devolve um texto vazio.multiple – devolve true se o elemento <select> permite várias selecções. É equivalente ao atributo multiple.A propriedade selectedIndex
Para seleccionar <select> elemento, você pode usar a API do DOM como o getElementById() ou querySelector().,
O exemplo a seguir ilustra como obter o índice da opção selecionada:
Como funciona:
- Primeiro, selecione o
<button>e<select>elementos usando oquerySelector()método. - em seguida, anexar um ouvinte de Eventos clique no botão e mostrar o índice selecionado usando o método
alert()quando o botão é clicado.,
O valor da propriedade
value propriedade <select> elemento depende da <option> elemento e o seu HTML multiple atributo:
- Se nenhuma opção é selecionada,
valuepropriedade da caixa de seleção é uma cadeia de caracteres vazia. - Se uma opção estiver seleccionada e tiver um id
atributo, o ID
propriedade da caixa de selecção é o valor da opção seleccionada.,
value atributo, ovalue propriedade do campo de selecção é o texto da opção seleccionada.value da caixa de selecção é derivada da primeira opção seleccionada com base nas duas regras anteriores.Veja o exemplo a seguir:
neste exemplo:
- Se você selecionar a primeira opção, o
valuepropriedade<select>está vazio., - Se você selecionar a última opção, o
valuepropriedade da caixa de seleção éEmber.js, porque a opção não temvalueatributo. - Se seleccionar a segunda ou terceira opção, a propriedade do valor será
"1"ou"2".
The HTMLOptionElement type
In JavaScript, the HTMLOptionElement type represents the<option> element.,
HTMLOptionElement tem as seguintes propriedades úteis:
-
index– o índice da opção dentro do conjunto de opções. -
selected– devolvetruequando a opção estiver seleccionada. Você configurou esta propriedade paratruepara seleccionar uma opção. -
text– devolve o texto da opção. -
value– devolve o atributo do valor HTML.,08″>
em Seguida, você pode acessar o text e value da opção selecionada através de text e value propriedades:
Code language: JavaScript (javascript)
Se <select> elemento permite múltiplas seleções, você pode usar o selected propriedade para determinar quais opções estão selecionadas:
neste exemplo, sb.options é uma matriz como objeto de modo que não tenha o filter() métodos como uma Array objeto.,
para obter estes métodos a partir do Array objecto, utiliza-se o métodocall(). Por exemplo, o seguinte retorna um array de opções selecionadas:
Code language: PHP (php)
a text propriedade das opções, você cadeia o resultado de filter() método map() método, como este:
Code language: JavaScript (javascript)
Resumo
<select>elemento permite que você selecione uma ou várias opções., Adicione o atributomultipleao elemento<select>para permitir várias seleções.HTMLSelectElementrepresenta o<select>elemento. Use oselectedIndexevaluepara obter o índice e o valor da opção selecionada.- o elemento representa o elemento
<option>. Se a opção estiver selecionada, a propriedadeselectedé verdadeira.,selectedTexteselectedValuepropriedades de retornotextevalueda opção selecionada.
- este tutorial foi útil ?
- YesNo