Man mano che impari a creare moduli web, una delle attività più comuni consiste nell’ottenere valori dai menu a discesa. In questo articolo impareremo come ottenere tali valori con JavaScript.
Facciamo un rapido riepilogo su come creare un elemento a discesa utilizzando HTML. Segui il mio Codepen se ti perdi.
Per costruire il nostro elemento a discesa dobbiamo usare il tag select e usare i bambini option annidati sotto di esso. L’elemento select crea il menu a discesa e con i tag di opzione definiamo quelle opzioni che vivranno il menu a discesa.
Creiamo un menu a discesa dei nostri frutti preferiti (che hanno emoji).
Abbiamo aggiunto un h2 vuoto che popoleremo con JavaScript in seguito. A questo punto puoi scegliere il tuo frutto preferito:
Nota l’importanza del proprietà di valore. Questa proprietà ci fornisce dati non stilizzati che possiamo facilmente riprodurre con JavaScript. D’altra parte il testo all’interno del tag option può essere praticamente qualsiasi cosa, quindi non è affidabile. La proprietà value è ciò che è importante qui.
Selezionare e visualizzare i valori a discesa con JavaScript
Prima di tutto dobbiamo selezionare il nostro menu a discesa frutti utilizzando getElementById sul tag select.
Ora che il nostro menu a discesa è selezionato, possiamo ottenere il valore dell’opzione attualmente selezionata. Questa per impostazione predefinita è la prima opzione. Proviamo con questo:
