Capiremo come gestire < Selezionare >opzione in JavaScript in questo tutorial.

Opzione di selezione HTML

Un'opzione ci facilita l'elenco delle opzioni. Ci permette di scegliere una o più opzioni. Usiamo gli elementi e per formare un'opzione.

Per esempio:

 Red Yellow Green Blue 

L'opzione ci consente di scegliere un'opzione alla volta menzionata sopra.

Se desideriamo più di una selezione, possiamo includere l'attributo in < multiplo > elementi sottostanti:

variabili globali JavaScript

 Red Yellow Green Blue 

Tipo HTMLSelectElement

Utilizziamo il tipo HTMLSelectElement per interagire con l'opzione in JavaScript.

Il tipo HTMLSelectElement contiene i seguenti attributi utili:

selezionatoIndice-Questo attributo fornisce un indice di opzioni selezionate a base zero. L'Indice selezionato sarà -1 quando non viene scelta alcuna opzione. Quando l'opzione consente più selezioni, SelectedIndex fornisce il valore della prima opzione.valore-L'attributo value fornisce l'attributo value del componente opzionale inizialmente selezionato se ce n'è uno singolo, altrimenti restituirà le stringhe vuote.multiplo-Gli attributi multipli danno vero quando il componente consente più di una selezione. È lo stesso degli attributi multipli.

proprietà SelectIndex

Applichiamo l'API DOM come querySelector() o getElementById() .

L'esempio indica come ottenere l'indice dell'opzione selezionata che è menzionata di seguito:

 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); }; 

Come funziona:

• Inizialmente, seleziona i componenti e con l'aiuto del metodo querySelector().
• Successivamente, collega il listener di eventi click a questo pulsante e visualizza l'indice selezionato con l'aiuto del metodo alert() se il pulsante viene premuto.

proprietà di valore

La proprietà value dell'elemento si basa sul componente e sull'attributo multiplo del suo HTML:

• La proprietà value di una casella di selezione sarà una stringa vuota quando non è stata selezionata alcuna opzione.
• La proprietà value di una casella di selezione sarà il valore dell'opzione scelta quando un'opzione è stata scelta e contiene l'attributo value.
• La proprietà valore di una casella di selezione sarà il testo dell'opzione scelta quando un'opzione è stata scelta e non contiene alcun attributo valore.
• La proprietà del valore di una casella di selezione verrà derivata dall'opzione selezionata iniziale relativa alle ultime due regole quando vengono scelte più di un'opzione.

Considera l'esempio seguente:

 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); }; 

In questo esempio sopra:

• L'attributo value dell'elemento è vuoto quando selezioniamo l'opzione iniziale.
• L'attributo valore di una casella di selezione sarà Ember.js poiché l'opzione scelta non contiene alcun attributo valore quando scegliamo l'ultima opzione.
• L'attributo value sarà '1' o '2' quando scegliamo la terza o la seconda opzione.

Tipo HTMLOptionElement

Il tipo HTMLOptionElement illustra l'elemento in JavaScript.

Questo tipo contiene le seguenti proprietà:

Indice- L'indice dell'opzione all'interno del gruppo di opzioni.

Selezionato- Restituisce un valore vero se viene scelta l'opzione. Impostiamo la proprietà selezionata su true per selezionare un'opzione.

Testo- Restituisce il testo dell'opzione.

Valore- Restituisce l'attributo value di HTML.

Il componente contiene un attributo option che ci consente di accedere alle opzioni di raccolta:

 selectBox.options 

Ad esempio, per accedere al valore e al testo della seconda opzione, utilizziamo quanto segue:

 const text = selectBox.options[1].text; const value = selectBox.options[1].value; 

Per ottenere un'opzione selezionata del componente insieme a una selezione individuale, utilizziamo il codice seguente:

 let selectOption = selectBox.options [selectBox.selectedIndex]; 

Successivamente, possiamo accedere al valore e al testo di un'opzione selezionata tramite valore e proprietà del testo:

 const selectedText = selectedOption.text; const selectedValue = selectedOption.value; 

Quando il componente consente più di una selezione, possiamo utilizzare un attributo selezionato per determinare quale opzione è selezionata:

 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); }; 

Nell'esempio, il sb.opzione è l'oggetto simile ad un array. Pertanto, non contiene il metodo filter() come l'oggetto Array.

Per prendere in prestito questi tipi di metodi tramite un oggetto array, utilizziamo un metodo call(), il seguente fornisce l'array di opzioni scelte:

 [].filter.call(sb.options, option => option.selected) 

E per ottenere l'attributo text di qualsiasi opzione, possiamo concatenare il risultato di un metodo filter() insieme a un metodo map() come di seguito:

 .map(option => option.text); 

Per ottenere l'opzione selezionata utilizzando il ciclo for

Possiamo utilizzare il ciclo for per scorrere le opzioni dell'elenco selezionato per determinare quale viene scelta. Potrebbe essere descritta una funzione per restituire il riferimento a un'opzione selezionata o al valore. Di seguito viene fornito il riferimento a un'opzione selezionata:

 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;>