Sincronizzazione
Sincronizzazione
Il codice di pagina precedente è completo dal punto di vista di gestione dell’interfaccia. Tutto dovrebbe funzionare come previsto: quando l’utente si sposta su un campo che prevede una select jQuery si occupa di far apparire la select stessa. Non appena l’utente lascia tale campo la select scompare, facendo apparire al suo posto il campo normale. Tutto questo riguarda però solo l’interfaccia, ovvero manca il codice che si occupa di sincronizzare il valore della select con quello mostrato dal campo ordinario. Questo codice non è sempre necessario, ma dipende da quello che dobbiamo fare con la form HTML. Se prevediamo l’invio della form attraverso un metodo standard del tipo HTTP POST, potremmo aver bisogno di valorizzare l’opzione scelta dall’utente. Per garantire la sincronizzazione tra i due campi accoppiati (select e input) possiamo usare un codice come questo
1 2 3 4 5 | $('.lookup_list').change(function() { var option = "option[value='" + $(this).val() + "']" ; var value = $(this).find(option).text() ; $(this).next().val(value) ; }) ; |
Il codice viene invocato tutte le volte che l’utente cambia il valore della select corrente (evento change). Vediamo un esempio: se la select contenesse dieci opzioni possibili e l’utente scegliesse l’opzione numero 7, l’istruzione $(this).val() ritornerebbe proprio il valore 7. Ciò significa che la variabile option assumerebbe il valore
1 | option[value='7'] |
Conseguentemente l’istruzione successiva risulterebbe questa
1 | var value = $(this).find(“option[value='7']”).text() ; |
Che sfrutta il selettore dell’attributo per individuare l’opzione scelta dall’utente, leggerne il contenuto e assegnarla alla variabile value. Con questo stratagemma il valore impostato nella select, risulta sempre sincronizzato a quello del campo di tipo input.
Mettendo tutto assieme abbiamo un sistema che permette di utilizzare le select in maniera moderna e flessibile, preservando la struttura HTML. L’unica accortezza è quella di fare attenzione all’ordine col quale specifichiamo i componenti HTML. In questo caso abbiamo inserito prima l’elemento select e poi il campo di tipo input. Qualsiasi sia l’ordine da noi scelto è importante rispettarlo, perché gli snippet utilizzano le istruzioni prev e next per identificare i componenti HTML. Ad esempio, se volessimo invertire l’ordine della select rispetto al campo di input, dovremmo anche invertire tutte le istruzioni prev con un next, e viceversa.
