Ottenere il valore selezionato in una select con JavaScript

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

Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!

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”