Piccoli incantesimi in Javascript

Avete la necessità di selezionare una certa opzione da un menu a discesa di una pagina web in base a quello che viene digitato in un campo della stessa form?

Ecco come fare:


Supponiamo di avere questa semplice form in html


Vogliamo fare in modo che

  • Se il nome utente inizia con la lettera C venga selezionato automaticamente il gusto Cioccolato
  • mentre se inizia per la lettera V venga selezionato il gusto Vaniglia.
  • In tutti gli altri casi, vogliamo che non venga selezionato alcun gusto.

è sufficiente inserire questa piccola funzione javascript all’interno della pagina web, meglio se prima della form in questione

infine, modificare il tag di input del campo testuale in html come segue

Da

A

In questo modo, appena la modifica del campo “Nome utente” verrà completata, scatterà l’evento onChange che richiamerà
la funzione PreSeleziona passando come parametro il contenuto del nome utente.
Con due semplici espressione regolare, il codice javascript controllerà che il contenuto del nome utente inizi o meno per le lettere
che abbiamo scelto.

Le espressioni regolari in questione sono

e

Il carattere ^ dice all’espressione di controllare solamente la prima lettera del nome utente, mentre il parametro /i alla fine dell’espressione, serve a non tener conto della differenza tra minuscole e maiuscole, i sta infatti per insensitive o più precisamente case insensitive.

Nel caso una delle due espressioni sia valida, il codice javascript procederà con il selezionare il gusto di gelato nel menu a discesa. Tramite l’istruzione

Questa istruzione contiene tutto il percorso del menu a discesa all’interno della pagina, cioè documento, nome della form ovvero form1 e nome del campo che contiene il menu a discesa, cioè opzioni. Infine, per l’istruzione relativa
all’opzione Cioccolato c’è [1] che significa prima opzione, mentre per la Vaniglia c’è [2] ovvero seconda opzione. E così via..

Ma il vero cambiamento avviene grazie a selected = true è qui che avviene tutta la magia, in quanto stiamo dicendo al programma che il selezionamento dell’opzione che abbiamo scelto è vero, cioè l’opzione è attiva.