Riempire una select da JSON

In una web app (soprattutto se creata per il mobile) può capitare di dover riempire un componente select con dati presi in formato tipo JSON o XML, magari presi tramite AJAX.

Io tra i due ho preferito JSON, vista anche la facilità di prendere questi dati tramite jQuery con la funzione getJSON.

Prima di tutto sulla pagina create una select:

<select id="my_select"></select>

Può essere totalmente vuota o con alcuni componenti preimpostati.

Poi create una funzione per prendere i dati tramite AJAX; come già detto useremo jQuery:

function getAllenamentiSelect() {
    $.getJSON('get_datas.php', function(data) {
        $.each(data, function(key, val) {
            $('#allenamento').append('<option value="' + val.a_id + '">' + val.a_nome + '</option>')
        });
    });
}

Come vedete attraverso getJSON è tutto molto semplice.

Iteriamo con each e poi facciamo l'append sul componente.

Ciao!