Popolare un menu a tendina con jQuery.

Popolare un menu a tendina è una tecnica ultimamente molto utilizzata soprattutto per “filtrare” elenchi molto lunghi e migliorare così l’usabilità di form e pagine web. Per fare ciò è necessario l’utilizzo di JavaScript, nel nostro caso vedremo come popolare una tendina tramite il framework jQuery.

Innanzituttto verifichiamo di aver inserito jQuery nella pagina in cui è presente la nostra tendina, nel caso tale libreria non sia collegata provvediamo a collegare l’ultima versione di jQuery all’interno del tag <head>  e attiviamo il DOM:

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    // Inserire qui il codice Javascript
});
</script>

Una volta fatto ciò andiamo nel tag e creiamo la nostra tendina con un ID opportuno (nel nostro caso “utenti”) e senza alcuna option al suo interno :

<select id="utenti"></select>

A questo punto la tendina potrebbe essere composta da un’array definito dopo una chiamata Ajax, nel nostro caso utilizziamo un’array predefinito che andremo a definire nel tag :

<script>
$(document).ready(function() {
   // Array Utenti
   var utenti = {
      0 : 'Alessandro',
      1 : 'Francesco',
      2 : 'Giuseppe',
      3 : 'Marco'
   };
});
</script>

A questo punto non resta che “ciclare” l’array tramite la funzione jQuery .each() e andare singolarmente ad inserire ogni option, valorizzandole con key e value rispettivamente la chiave e il valore di ogni entry del nostro array utenti):

<script>
$(document).ready(function() {
   // Array Utenti
   var utenti = {
      0 : 'Alessandro',
      1 : 'Francesco',
      2 : 'Giuseppe',
      3 : 'Marco'
   };
   // Ciclo l'array utenti
   $.each(utenti, function(key, value) {
      // Aggiungo per ogni elemento dell'array una nuova option
      $('#utenti').append('<option value="' + key + '">' + value + '</option>');
   });
});
</script>

Navigando la pagina dal browser potrete notare che la nostra tendina viene popolata dal nostro array!
Nel nostro caso abbiamo utilizzato la funzione jQuery .append() che permette di aggiungere del codice (nel nostro caso una option) ad elemento padre (nel nostro caso ‘#utenti’).

Il meccanismo è lo stesso anche nel caso di una chiamata Ajax/JSON!

Tutto il contenuto di questo breve tutorial è scaricabile cliccando

Download

Info sull' autore:
Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio Blog
Leggi gli altri articoli di

Ancora nessuna risposta per Popolare un menu a tendina con jQuery.

Lascia un commento

Trackbacks