Select dinamiche, il classico esempio dei comuni italiani.
Sono necessarie 3 tabelle mysql presenti nello zip di questo esempio.
Le tabelle sono state generate da un file di testo reperibile sul sito comuni-italiani.it a questo indirizzo.
Tuttavia l'ultimo aggiornamento segnalato nella pagina risale al 22/08/2011, potrebbero mancare pertanto alcuni nuovi comuni.
index.html
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
div.ricerca {
line-height: 34px;
}
div.ricerca span {
display: inline-block;
width: 110px;
text-align: right;
padding-right: 4px;
}
</style>
<script>
$(document).ready(function () {
comuni();
$("select").change(function () {
comuni();
})
})
function comuni() {
$.ajax({
type: "POST",
url: "/demos/regioni_province_comuni/comuni.php",
data: $("#ricerca").serialize(),
success: function (response) {
eval(response);
}
});
}
</script>
</head>
<body>
<div class="ricerca">
<form id="ricerca">
<span>Regione :</span>
<select name="regione">
<option value=""></option>
</select><br/>
<span>Provincia :</span>
<select name="provincia">
<option value=""></option>
</select><br/>
<span>Comune :</span>
<select name="comune">
<option value=""></option>
</select>
</form>
</div>
</body>
</html>
La pagina comuni.php genera il codice javascript che verrà eseguito dalla funzione eval() nella chiamata ajax.
<?php
include 'config.php';
//ini_set('error_reporting', E_ALL);
//ini_set('display_errors', true);
// recupero vaolori delle select
$regione = isset($_REQUEST['regione']) ? $_REQUEST['regione'] : "";
$provincia = isset($_REQUEST['provincia']) ? $_REQUEST['provincia'] : "";
$comune = isset($_REQUEST['comune']) ? $_REQUEST['comune'] : "";
// mi connetto al database
$sql = new mysqli(DB_HOST_DEMO, DB_USER_DEMO, DB_PSWD_DEMO, DB_NAME_DEMO);
// estraggo tutte le regioni
$query = "SELECT * FROM regioni";
$result = $sql->query($query);
// svuoto la select regione
echo "$('select[name=\"regione\"]').empty();";
// aggiungo una option vuota
echo "$('select[name=\"regione\"]').append('<option value=\"\"></option>');";
// ciclo i risultati della query
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
// imposto il selected sull'eventuale regione scelta
$selected = "";
if ($row['idRegione'] == $regione) {
$selected = "selected=\"selected\"";
}
// popolo la select
echo "$('select[name=\"regione\"]').append('<option $selected value=\"" . $row['idRegione'] . "\">" . addslashes($row['nomeRegione']) . "</option>');";
}
// se è stata scelta una regione
if (!empty($regione)) {
// estraggo le province della regione scelta
$query = "SELECT * FROM province WHERE idRegione ='$regione'";
$result = $sql->query($query);
// svuoto la select provincia
echo "$('select[name=\"provincia\"]').empty();";
// aggiungo una option vuota
echo "$('select[name=\"provincia\"]').append('<option value=\"\"></option>');";
// svuoto la select comune
echo "$('select[name=\"comune\"]').empty();";
// aggiungo una option vuota
echo "$('select[name=\"comune\"]').append('<option value=\"\"></option>');";
// ciclo i risultati della query
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
// imposto il selected sull'eventuale provincia scelta
$selected = "";
if ($row['siglaProvincia'] == $provincia) {
$selected = "selected=\"selected\"";
}
// popolo la select
echo "$('select[name=\"provincia\"]').append('<option $selected value=\"" . $row['siglaProvincia'] . "\">" . addslashes($row['nomeProvincia']) . "</option>');";
}
}
// se è stata scelta una provincia
if (!empty($provincia)) {
// estraggo i comuni della provincia scelta
$query = "SELECT * FROM comuni WHERE provincia ='$provincia'";
$result = $sql->query($query);
// svuoto la select comune
echo "$('select[name=\"comune\"]').empty();";
// aggiungo una option vuota
echo "$('select[name=\"comune\"]').append('<option value=\"\"></option>');";
// ciclo i risultati della query
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
// imposto il selected sull'eventuale comune scelto
$selected = "";
if ($row['Istat'] == $comune) {
$selected = "selected=\"selected\"";
}
// popolo la select
echo "$('select[name=\"comune\"]').append('<option $selected value=\"" . $row['Istat'] . "\">" . addslashes($row['Comune']) . "</option>');";
}
}Aggiornamento 20 settembre 2014
Grazie alle vostre segnalazioni mi sono accorto che nel codice php formattato, non venivano riportati correttamente i backslash, di conseguenza, con il copia/incolla, lo script generava degli errori javascript.
