Ottenere il valore selezionato in una select con JavaScript

di Lorenzo Neri
0 commento 85 visualizzazioni

C’è modo di ottenere il valore selezionato in una select con JavaScript? Come si fa? Scopriamolo assieme in questo articolo!

Pariamo dalle basi e immaginiamo di avere una select come quella qua sotto:

<select id="selectDaVerificare">
   <option value="1">uno</option>
   <option value="2">due</option>
   <option value="3">tre</option>
</select>

Quindi, in base a ciò che seleziona l’utente, vorremmo avere nel JavaScript il valore “1”, “2” oppure “3”.

Che fare quindi?

In prima battuta, dobbiamo usare l’operatore “getElementById”:

var selectDaVerificare = document.getElementById("selectDaVerificare");

Così facendo, otteniamo la select da analizzare come variabile.

C’è una cosa molto bella e interessante, nonchè quasi immediata come correlazione tra i tag HTML e le variabili in JavaScript.

Una select, come ben saprai, si compone di tanti tag “option” quante sono le effettive opzioni messe a disposizione.

Bene, quando valorizziamo una variabile JavaScript come abbiamo visto poco fa con un tag “select” HTML succede l’analogia di cui parlavo prima.

La variabile “selectDaVerificare” conterrà un attributo il cui nome è “options”!

L’attributo options delle select

Come funziona questo attributo?

Si tratta di un array che contiene i parametri di tutte le opzioni all’interno della nostra select.

Fico e molto comodo vero?!

Ma le cose utili e belle non finiscono qui.

C’è un altro attributo della variabile di cui parlavamo prima che torna veramente, ma veramente tanto utile.

L’attributo selectedIndex delle select

Il nome dovrebbe già farti scattare qualcosa 😀

Ebbene sì, questo attributo mantiene in memoria l’indice dell’opzione selezionata all’interno di una select.

Arrivati a questo punto, sappiamo cosa dobbiamo fare per ottenere il valore selezionato in una select con JavaScript:

var selectDaVerificare = document.getElementById("selectDaVerificare");

var indiceSelezionato = selectDaVerificare.selectedIndex;

var valoreSelezionato = selectDaVerificare.options[indiceSelezionato];

Non ci siamo del tutto! Dobbiamo fare un’ultima cosa! 😀

Quando otteniamo un elemento dell’array “options” di cui abbiamo parlato fino ad ora, otteniamo un oggetto JavaScript con due attributi.

Di fatto, la variabile “valoreSelezionato” conterrà un oggetto con due attributi molto utili.

Il primo, è quello che stiamo cercando da inizio articolo! E guarda caso, è “value”.

Il secondo, può tornarci comodo per altre cose, ed è “text”. Immagino tu sappia già cosa contenga 😀

Ciò detto:

var selectDaVerificare = document.getElementById("selectDaVerificare");

var indiceSelezionato = selectDaVerificare.selectedIndex;


var valoreSelezionato = selectDaVerificare.options[indiceSelezionato];

var valoreDentroLopzione = valoreSelezionato.value;

var testoDentroLopzione = valoreSelezionato.text;

Per concludere, se fosse stata selezionata la seconda opzione della select:

  • valoreDentroLopzione: avrebbe come valore “2”
  • testoDentroLopzione: avrebbe come valore “due”

Potrebbero interessarti

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più