Una select HTML a scomparsa con jQuery

L'elemento select e uno dei componenti HTML piu longevi. Questo elemento e tuttora considerato uno standard, com'era sin nelle prime versioni di HTML. Data l'anzianita del componente, nelle moderne interfacce Web la presenza di una vecchia select rischia di far apparire sorpassata l'interfaccia stessa. Cio nonostante l'utilita della select resta indiscussa: ogni volta che vogliamo far scegliere ad un utente un elemento all'interno di un elenco possiamo utilizzare una select.

Codice jQuery

Codice jQuery

La struttura HTML di pagina precedente è volutamente ridondante. Ciò permette di adattare l’interfaccia alla situazione: avremo un “look & feel” su misura per la visualizzazione, e un altro “look & feel” per la modalità di editing dei dati. In particolare sfrutteremo i nomi delle classi CSS per identificare gli elementi HTML, in modo da manipolarli con jQuery. La prima cosa da fare, quando carichiamo la pagina, è quella di nascondere tutte le select, cioè

Dove la classe CSS lookup_list identifica tutte le select della form (vedi HTML di pagina precedente). Quando l’utente si posiziona con il mouse sopra il campo che contiene una select dobbiamo invece nascondere i campi di input e visualizzare la select in questione. Il codice per gestire questi eventi è abbastanza semplice

Qui sopra sfruttiamo gli event handler standard di jQuery, che intercettano rispettivamente l’evento “acquisizione del focus” e “perdita del focus”. Ricordiamo che l’acquisizione del focus può avvenire in modi diversi: il campo potrebbe acquisire il focus quando l’utente ci clicca sopra col mouse, oppure quando l’utente si sposta avanti o indietro con il tasto TAB.

Esiste quindi un potenziale problema. Se alcuni campi di tipo select sono collocati l’uno di seguito all’altro (come in figura 1 a pagina precedente) quando l’utente si sposta dal primo campo al successivo succede una cosa un po’ strana: il primo campo perde il focus mentre il secondo lo acquisisce. Questa simultaneità di eventi sulla stessa classe CSS può confondere jQuery, che non sa più quale evento gestire. Per evitare sorprese di questo tipo aggiungiamo un codice di controllo

Il codice qui sopra risolve ogni problema. Tutte le volte che il focus torna su un qualsiasi campo che non sia associato ad una select diciamo al browser di ripristinare la situazione iniziale, cioè nascondiamo le select e visualizziamo i campi di tipo normale.