In questo articolo vediamo un esempio di come popolare una selectbox html con i risultati prelevati dal database in base all’opzione selezionata da una prima selectbox utilizzando JQuery e PHP.
Nel form html che sviluppiamo, consideriamo una prima selectbox contenente tra le opzioni tutte le regioni d’italia ed una seconda che sarà popolata dalle provincie in base ai risultati ottenuti dalla scelta.
Per iniziare abbiamo bisogno della libreria JQuery che possiamo scaricare qui che poi includiamo all’interno della nostra pagina html contente il form:
Form html
//includo la libreria jquery
<script src="js/jquery.js" type=" text/ javascript"></script>
<script type="text/ javascript">
$(document).ready(function() {
$('#regione').change(function() {
var regione=$("#regione").val();
if (regione!="") {
//gestisco la chiamata alla pagina provincia.php
$.getJSON("provincia.php?val_regione="+regione, function(jData){
$.each(jData, function(i, data) {
$('#provincia').append(new Option(data.provincia, i+1));
});
});
}
});
});
</script>
<form id="my_form"><select id="regione">
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
<option value="4">Campania</option>
<option value="5">Emilia Romagna</option>
<option value="6">Friuli Venezia Giulia</option>
<option value="7">Lazio</option>
<option value="8">Liguria</option>
<option value="9">Lombardia</option>
<option value="10">Marche</option>
<option value="11">Molise</option>
<option value="12">Piemonte</option>
<option value="13">Puglia</option>
<option value="14">Sardegna</option>
<option value="15">Sicilia</option>
<option value="16">Toscana</option>
<option value="17">Trentino Alto Adige</option>
<option value="18">Umbria</option>
<option value="19">Valle d'Aosta</option>
<option value="20">Veneto</option>
</select>
</form>
Praticamente come possiamo vedere dal codice, una volta che selezioniamo un elemento, gestiamo la chiamata alla pagina php con il metodo getJSON() di jQuery che ci restituisce i dati trovati in formato Json che visualizzaimo all’interno della seconda selectbox.
Possiamo infine dare uno sguardo alla pagina php nella quale preleviamo i dati dal database:
<?php
//connessione a mysql
$conn=mysqli_connect("localhost","user","password","db_name");
if(isset($_GET['val_regione']))
{
//ottengo il valore della regione
$id_regione= $_GET['val_regione'];
//vado a selezionare le province che corrispondono all'id regione selezionato
$query="SELECT * FROM province WHERE id_regione='$id_regione'" ;
$result=mysqli_query($conn,$query);
while($row=mysqli_fetch_array($result))
{
$results[]=array('id' => $row['id'], 'provincia' => $row['provincia']);
}
echo json_encode($results);
}
?>