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
<form name="form1">Nome utente
<input name="nomeutente" type="text" value="" />
Gusto di gelato preferito
<select name="opzioni">
<option>Scegli un gelato</option>
<option value="Cioccolato">Cioccolato</option>
<option value="Vaniglia">Vaniglia</option>
</select>
<input type="submit" value="OK" /></form>
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
function PreSeleziona(valore) {
if (valore.match(/^C/i))
document.form1.opzioni[1].selected = true;
else if (valore.match(/^V/i))
document.form1.opzioni[2].selected = true;
else
// Non fare nulla
var donothing = "";
}
infine, modificare il tag di input del campo testuale in html come segue
Da
<input name="nomeutente" type="text" value="" />
A
<input name="nomeutente" type="text" value="" />
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
/^C/i
e
/^V/i
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
[javascript ruler=”false” font_size=”30%” toolbar=”false” gutter=”false”]
document.form1.opzioni[1].selected = true;
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.