Stefan Manastirliu

Oggi voglio proporvi una soluzione che mi è capitata di usare poco tempo fa. Spesso ci capita di usare delle select box per selezionare un range di risultati. Nessun problema se ne abbiamo solo una, ma cosa succede quando ce ne servono due? e tre?

Un esempio di utilizzo può essere quando vogliamo far selezionare all’utente un prodotto, che di solito sono suddivisi in categorie, o anche in sottocategorie.
Per facilitare la scelta e sopratutto quando abbiamo a che fare con un numero grande di elementi è improponibile fare una lista completa.
Dobbiamo allora filtrare in qualche modo l’elenco, una possibilità può essere procedendo a ritroso.

In questo caso per esempio, facciamo selezionare prima la categoria, poi la sottocategoria e infine il prodotto. Dobbiamo quindi “popolare” le select tenendo conto della scelta precedente dell’utente.
In modo classico questo si faceva facendo navigare l’utente su 2 pagine diverse(o tre volte la stessa) e passando quindi come variabile di POST la scelta fatta in precedenza.

Ciò che ho fatto in questo esempio è fare la stessa cosa ma attraverso AJAX utilizzando jQuery.
Tramite javascript, viene captato la scelta dell’utente nella prima select, vengono inviati ad una pagina PHP, che interroga un database MySql e fornisce una risposta in XML.
L’XML viene quindi interpretato dalla pagina chiamante e le select successive vengono popolate di conseguenza.

Potete vedere l’esempio in funzione su questa pagina e scaricare l’archivio con tutti i codici sorgenti.

Scusate se non sono stato molto dettagliato nella spiegazione, ma tra 10 minuti devo prendere un treno XD, riprenderò il discorso meglio nei prossimi giorni! Ciao!