Una delle esigenze più frequenti nel web 2.0 è quella di creare menù di selezione dinamiche, facendo cioè in modo che alla scelta di un'opzione venga popolata dinamicamente una combo box adiacente. Classico esempio, quello delle regioni e delle province italiane.
Vediamo oggi come popolare una select html in base al valore selezionato da un utente in un'altra select. E' il caso, ad esempio, di una select in cui appaiono le 20 regioni italiane; alla scelta di una di queste, un'altra select viene popolata soltanto dalle province di quella regione, rendendo così la selezione più rapida e meno incline agli errori.
Per far questo, usiamo due files: un file html, contenente la select ed il javascript necessario, ed un file php nel quale inseriremo gli array con le province. Si tratta infatti di un esempio, nella realtà dei fatti quasi sempre il file php conterrà una query ad un database. Potete scaricare i due files usando l'apposito link a fine articolo.
Il file html richiama la libreria jquery, che agevola lo sviluppo della parte ajax 
. Quindi viene creata una funzione (che sarà poi richiamata sull'evento onChange della select principale), che si occupa di passare al file php il parametro scelto (il nome della regione) e di elaborarne poi i risultati.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function riempiSelect(){
var $select = $('#sub_category');
$select.find('option').remove();
if($('#root_category').val() != '#'){
$.getJSON( 'select.php', {
root_category: $('#root_category').val()
}
)
.done(function( data ) {
$.each( data, function( key, value ) {
$('<option>').val(key).text(value).appendTo($select);
});
});
}
}
</script>
Notate l'utilizzo della funzione getJSON, tipica di Jquery, che esegue una chiamata Ajax sfruttando il comodo formato JSON per la formattazione e lo scambio dei dati. Il parametro passato (la regione scelta) è contenuto nella variabile $('#root_category').val(), visto che abbiamo assegnato alla select delle regioni l'id "root_category":
<select name="root_category" id="root_category" onChange="riempiSelect();">
<option value="#">Selezionare</option>
<option value="piemonte">Piemonte</option>
<option value="valle_d_aosta">Valle d''Aosta</option>
ecc..
Come vedete, abbiamo usato come attributo "value" il nome della regione in un formato più agevole allo scambio dati; "Valle d'Aosta" diventa ad esempio "valle_d_aosta".
Tornando al javascript, il ciclo $.each() ci consente di scorrere l'array JSON prodotto dal file select.php e popolare, grazie alla funzione Jquery appendTo, la select degli attributi arrivati.
Il file select.php, almeno per lo scopo illustrativo di questo articolo, contiene un array di 20 elementi, ciascuno contenente l'elenco delle province di quella regione. L'indice di questo array coincide con il nome della regione, nel modo semplificato visto in precedenza:
$elenco_province['piemonte'] = array('TO'=>'Torino','VC'=>'Vercelli','NO'=>'Novara','CN'=>'Cuneo','AT'=>'Asti','AL'=>'Alessandria','BI'=>'Biella','VB'=>'Verbano-Cusio-Ossola');
$elenco_province['valle_d_aosta'] = array('AO'=>'Valle d\'Aosta');
La variabile selezionata arriva via get per cui possiamo usarla direttamente nella stampa JSON dell'array:
echo json_encode($elenco_province[$_GET['root_category']]);
... tutto qui! Potete scaricare lo script di esempio da questo link. 