JavaScript select Element | Mark's Trackside

Riepilogo: in questo tutorial, imparerai come gestire l’elemento<select> in JavaScript.

Introduzione agli elementi HTML select

A<select> elemento fornisce un elenco di opzioni. Esso consente di selezionare una o più opzioni.

Per formare un elemento <select>, si utilizzano gli elementi <select> e <option>., Ad esempio:

L’elemento precedente <select> consente di selezionare una singola opzione alla volta.

Se non si desidera più selezioni, è possibile aggiungere multiple attributo <select> elemento come segue:

La HTMLSelectElement tipo

Per interagire con <select> elemento in JavaScript, si utilizza il tag HTMLSelectElement tipo.,

Il tipoHTMLSelectElement ha le seguenti proprietà utili:

selectedIndex – restituisce l’indice basato su zero dell’opzione selezionata. Il selectedIndexè-1 se non è selezionata alcuna opzione. Se l’elemento<select> consente selezioni multiple,selectedIndex restituiscevalue della prima opzione.,
value – restituisce la proprietàvalue del primo elemento di opzione selezionato se ce n’è uno, altrimenti restituisce una stringa vuota.
multiple – restituisce true se l’elemento <select> consente selezioni multiple. È equivalente all’attributomultiple.

La proprietà selectedIndex

Per selezionare un elemento <select>, si utilizza l’API DOM come getElementById() o querySelector().,

L’esempio seguente viene illustrato come ottenere l’indice dell’opzione selezionata:

Come funziona:

Primo, selezionare il <button> e <select> elementi utilizzando il querySelector() metodo.
Quindi, allega un listener di eventi click al pulsante e mostra l’indice selezionato usando il metodoalert() quando si fa clic sul pulsante.,

La proprietà value

value proprietà <select> elemento dipende dalla <option> elemento HTML multiple attributo:

Se nessuna opzione è selezionata, value proprietà della casella di selezione è una stringa vuota.
Se un’opzione è selezionata e ha un attributo value, la proprietà value della casella di selezione è il valore dell’opzione selezionata.,
Se un’opzione è selezionata e non ha un attributo value, la proprietà value della casella di selezione è il testo dell’opzione selezionata.
Se sono selezionate più opzioni, la proprietà value della casella di selezione deriva dalla prima opzione selezionata in base alle due regole precedenti.

Vedere il seguente esempio:

In questo esempio:

Se si seleziona la prima opzione, la proprietàvalue di<select> è vuota.,
Se si seleziona l’ultima opzione, la proprietàvaluedella casella di selezione èEmber.jsperché l’opzione selezionata non ha alcun attributovalue.
Se si seleziona la seconda o la terza opzione, la proprietà value sarà"1"o"2".

Il tipo HTMLOptionElement

In JavaScript, il tipoHTMLOptionElement rappresenta l’elemento<option>.,

Il tipoHTMLOptionElement ha le seguenti proprietà utili:

index – l’indice dell’opzione all’interno della raccolta di opzioni.
selected – restituiscetrue quando l’opzione è selezionata. Si imposta questa proprietà sutrue per selezionare un’opzione.
text – restituisce il testo dell’opzione.
value – restituisce l’attributo HTML value.,08″>

Poi si può accedere alla text e value dell’opzione selezionata tramite text e value proprietà:


Code language: JavaScript (javascript)

Se un <select> elemento consente a più selezioni, è possibile utilizzare il selected proprietà per determinare quali opzioni sono selezionate:

In questo esempio, sb.options è un array come oggetto in modo da non avere il filter() metodi come un Array oggetto.,

Per prendere in prestito questi metodi dall’oggetto Array, si utilizza il metodo call(). Per esempio, il seguente restituisce un array di opzioni:


Code language: PHP (php)

E di ottenere il text proprietà delle opzioni, la catena di risultato del filter() metodo map() metodo, come questo:


Code language: JavaScript (javascript)

Sommario

<select> elemento che permette di selezionare una o più opzioni., Aggiungere l’attributomultiple all’elemento<select> per abilitare selezioni multiple.
IlHTMLSelectElementrappresenta l’elemento<select>. Utilizzare selectedIndexevalue per ottenere l’indice e il valore dell’opzione selezionata.
IlHTMLOptionElementrappresenta l’elemento<option>. Se l’opzione è selezionata, la proprietà selected è true., Le proprietàselectedText eselectedValue restituisconotext evalue dell’opzione selezionata.

Questo tutorial è stato utile ?
Sì

JavaScript select Element (Italiano)