Continuiamo la guida sulle select dinamiche implementando il codice jQuery.
tutNel HEAD della pagina index.php descritta precedentemente inseriamo la libreria jQuery e il codice javascript delle funzioni javascript richiamate dal tag onChange delle select di regioni e province:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Select Province e Comuni dalla Regione.
function selProvCom(idRegion) {
// Seleziono province di questa regione.
$.get("select_abitativa.php", { regionid: idRegion, requestItems: 'province'},
function(dataProvince){
$("select[id='province']").empty();
var options = '<option value="">-- seleziona --</option>';
var arrayProvince = dataProvince.split( '||');
for (var i = 1; i < arrayProvince.length; i++) {
var provincia = arrayProvince[i].split( /,/);
options += '<option value="' + provincia[0] + '">
' + provincia[1] + '</option>';
}
$("select[id='province']").html(options);
});
// Seleziono comuni di questa regione.
$.get("select_abitativa.php", { regionid: idRegion, requestItems: 'comuni'},
function(dataComuni){
$("select[id='city']").empty();
var options = '<option value="">-- seleziona --</option>';
var arrayComuni = dataComuni.split( '||');
for (var i = 1; i < arrayComuni.length; i++) {
var comune = arrayComuni[i].split( /,/);
options += '<option value="' + comune[0] + '">
' + comune[1] + '</option>';
}
$("select[id='city']").html(options);
});
}
// Select Comuni dalla Provincia.
function selCom(idProvincia) {
// Seleziono comuni di questa provincia.
$.get("select_abitativa.php", { provinciaid: idProvincia, requestItems: 'comuni'},
function(dataComuni){
$("select[id='city']").empty();
var options = '<option value="">-- seleziona --</option>';
var arrayComuni = dataComuni.split( '||');
for (var i = 1; i < arrayComuni.length; i++) {
var comune = arrayComuni[i].split( /,/);
options += '<option value="' + comune[0] + '">
' + comune[1] + '</option>';
}
$("select[id='city']").html(options);
}); }
</script>
con il metodo $.get di jQuery effettuiamo una richiesta di tipo GET allo script select_abitativa inviando, nella prima funzione selProvCom, l'ID della regione selezionata e cosa vogliamo ottenere (province e comuni), mentre nella seconda funzione selCom inviamo l'ID della provincia selezionata e la richiesta dei comuni.
Autore
Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.
Sito web dell'autore