Javascript Seleziona

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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:

92151925 81da0a00 Ede7 11ea 9796 2a8a506c4a6e

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:

Qui stiamo accedendo all’attributo dell’array delle opzioni degli elementi. Quindi selezioniamo l’indice dell’opzione attualmente selezionata e accediamo al suo valore o testo.

Ora prova a console.log entrambe le variabili. Cosa succede? Niente. Perché? Perché il nostro primo elemento ha un valore vuoto (è solo un segnaposto). Commenta la prima opzione e riprova. Yay! Otteniamo sia il valore che il testo con javascript.

Ascolto delle modifiche al menu a discesa con JavaScript

Dovremmo rendere dinamico il nostro menu a discesa poiché JavaScript è progettato per reagire ai cambiamenti nella tua pagina. Con questo in mente assegneremo un eventListener al nostro elemento fruit.

Con il nostro eventListener stiamo ascoltando un cambiamento nel nostro menu a discesa. Nota come puoi anche ottenere il valore dell’opzione selezionata eseguendo e.target.value, questo probabilmente l’hai visto in un altro tutorial sui moduli.

Siamo arrivati . Ora puoi selezionare qualsiasi opzione di frutta e JavaScript sta reagendo ai cambiamenti nel nostro menu a discesa e aggiornando il nostro h2 di conseguenza. Giusto molto fruttuoso!

92155152 88b74b80 Edec 11ea 8016 7f8911f26735

Conclusione

Ottenere valori a discesa è un’abilità cruciale mentre impari lo sviluppo web. I valori che otteniamo sono importanti se vogliamo aggiornare un database, mostrare la selezione all’utente o semplicemente ‚Äòreagire‚Äô alle modifiche del DOM. Con JavaScript possiamo ottenere tali valori in pochissimo tempo.