Al giorno d’oggi il web è pieno zeppo di pagine che, grazie a richieste asincrone (ajax), aggiornano porzioni di esse senza effettuare un caricamento di tutta la pagina.

Un "problema" ricorrente è popolare una select in base alla scelta effettuata in un’altra select. Un esempio è quello delle regioni e città: si seleziona una regione dalla prima select e tramite ajax si popola la seconda select con le sole città della regione scelta. Ma ci sono migliaia di esempi e casi d’uso.

Guarda Demo

Vediamo come sia semplice realizzare tutto con l’aiuto di jQuery.

Come esempio base ci basta un file html che contiene le select ed un file php al quale viene inoltrata la richiesta asincrona e che ci restituisce i dati in base ai parametri passati.

Nella sezione head del file html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"</script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	   $("select#primaselect").change(function(){
		 $.getJSON("select.php",{id: $(this).val()}, function(dati){
			var options = '';
			for (var i = 0; i < dati.length; i++) {
				options += '<option value="' + dati[i].valore + '">' + dati[i].etichetta + '</option>';
			}
			$("#secondaselect").html(options);
			$('#secondaselect option:first').attr('selected', 'selected');
		});
            });
      });
</script>

Nel body del file html:

1
2
3
4

<b>Scegli il tuo smartphone preferito:</b>
<select id="primaselect"><option value="">Scegli</option><option value="1">HTC</option><option value="2">SAMSUNG</option><option value="3">MOTOROLA</option>
</select>
<select id="secondaselect"></select>

Contenuto del file php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
 
  $dati = array();
 
  $id = $_GET['id'];
 
  if($id == 1){
     array_push($dati, array("valore"=>"cod_001","etichetta"=>"Desire HD"));
     array_push($dati, array("valore"=>"cod_002","etichetta"=>"Flyer"));
     array_push($dati, array("valore"=>"cod_003","etichetta"=>"Chacha"));
     array_push($dati, array("valore"=>"cod_004","etichetta"=>"HD2"));
  }
 
  if($id == 2){
     array_push($dati, array("valore"=>"cod_005","etichetta"=>"Galaxi S"));
     array_push($dati, array("valore"=>"cod_006","etichetta"=>"Wave II"));
     array_push($dati, array("valore"=>"cod_007","etichetta"=>"Omnia 7"));
     array_push($dati, array("valore"=>"cod_008","etichetta"=>"Omnia HD"));
 
  }
 
  if($id == 3){
     array_push($dati, array("valore"=>"cod_009","etichetta"=>"Atrix 4G"));
     array_push($dati, array("valore"=>"cod_010","etichetta"=>"Droid Bionic"));
     array_push($dati, array("valore"=>"cod_011","etichetta"=>"Cliq 2"));
     array_push($dati, array("valore"=>"cod_012","etichetta"=>"Bravo"));
 
  }
 
   echo json_encode($dati);
?>

In questo caso il file php recupera i dati da alcuni array costruiti ad hoc per l’esempio, ma nulla vieta (anzi si spera) che i dati siano recuperati da un db.

Per qualsiasi chiarimento, a disposizione.

Guarda demo