Corsi on-line

Menù select a cascata con Chained Selects

Si immagini di dover gestire quattro (o più) tabelle di database tutte in relazione tra loro, un esempio classico di questo tipo di impostazione è quello di nel quale si ha una tabella relativa alle categoria principali, una seconda dedicata alla sottocategorie, una terza alle sottocategorie di secondo livello e un’ultima a quelle di terzo livello; come restituire tale struttura tramite dei menù di selezione all’interno di un form?

csChiaramente la selezione di una categoria principale costituirà un vincolo per il quale la seconda select potrà presentare soltanto categorie appartenenti a quest’ultima, stesso discorso per le sottocategorie di secondo e terzo livello; volendo chiamare “Nazioni” la tabella delle categorie, quella delle sottocategorie potrebbe chiamarsi per esempio “Regioni”, “Province” quella delle sottocategorie di secondo livello e “Citta” quella di terzo.

Quindi, selezionando “Italia” dalla tabella “Nazioni”, la seconda select potrà presentare soltanto le regioni della Penisola, ad esempio la “Sardegna”, ne consegue che la terza select potrà contenere unicamente province sarde e la quarta solo le città della provincia sarda selezionata. Un meccanismo abbastanza complesso da gestire a livello di codice che potrà essere semplificato grazie all’impiego di un plugin per il framework JavaScript jQuery come Chained Selects.

Il suo funzionamento è molto semplice, per utilizzare tale libreria si dovrà innanzitutto includerla, dopo jQuery, nella pagine Web di destinazione:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

Fatto questo si potranno creare delle select come le seguenti:

<select id="marchio" name="marchio">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="serie" name="serie">
  <option value="">--</option>
  <option value="serie-3" class="bmw">Series 3</option>
  <option value="serie-5" class="bmw">Series 5</option>
  <option value="serie-6" class="bmw">Series 6</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Il funzionamento del plugin appare estremamente semplice, si noti infatti come la seconda select presenti dei selettori (class) il cui nome è stato associato a quello dei valori della prima select, in questo modo le relazioni esistenti risulteranno immediatamente disponibili. Allo sviluppatore non rimarrà altro che indicare l’ordine di concatenazione tramite JavaScript:

$("#serie").chained("#marchio");

Nello stesso modo sarà possibile definire ulteriori livelli di concatenazione, ad esempio:

<select id="modello" name="modello">
  <option value="">--</option>
  <option value="coupe" class="serie-3 serie-6 a5">Coupe</option>
  <option value="cabrio" class="serie-3 serie-6 a3 a5">Cabrio</option>
  <option value="sedan" class="serie-3 serie-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

aggiungerà un nuovo livello di concatenazione che potrà essere definito tramite JavaScript in questo modo:

$("#serie").chained("#marchio");
$("#modello").chained("#serie");

Via Chained Selects

Post correlati
  • carmine

    Grazie 1000 è la soluzione che cercavo da inserire nel mio sito.
    Volego chiederti come posso inserire dei link nell’ultima select per scaricare dei pdf dallo stesso server, se possibile aprendoli in una nuova pagina web che non sia pop-up però.
    grazie

I più letti del mese
Tematiche