Popolare un menu a tendina con jQuery

Comporre dinamicamente una tendina è una tecnica ultimamente molto utilizzata soprattutto per “filtrare” elenchi molto lunghi e migliorare l’usabilità di form e pagine web. Per fare ciò è necessario l’utilizzo di Javascript, nel nostro caso vedremo come popolare una tendina tramite jQuery.

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 e attiviamo il DOM:

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

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

A questo punto non resta che “ciclare” l’array e andare singolarmente ad inserire ogni:

Navigando la pagina dal browser potrete notare che la nostra tendina viene popolata dal nostro array!
Il meccanismo è lo stesso anche nel caso di una chiamata Ajax (con JSON), ovviamente bisogna preparare il file che genera la stringa JSON ed effettuare la chiamata.