select regioni-provincie con javascript, php e mysql

Avevo bisogno di un sistema che alla selezione di una regione aggiornasse il menu a tendina della provincia. Cercando in rete ho trovato un pò di cose che ho messo insieme.

Innanzitutto un dump di mysql con le tabelle con le regioni e le provincie italiane, e con le opportune relazioni:

scarica qui il dump mysql file perso durante un trasferimento…

poi bisogna creare le 2 select

quella della regione prende i dati da mysql e chiama la funzione javascript che valorizzerà la provincia:

<select name="id_regione" onChange="Riempi(this.options.selectedIndex)">
<?php
$query = "SELECT * FROM regioni WHERE 1 ORDER BY nomeregione";
$result=mysql_query($query);
echo '<option value=""> </option>';
while($row=mysql_fetch_array($result)){
echo '<option value="'.$row['id_regione'].'">'.$row['nomeregione'].'</option>';
}
?>
</select>

La select della provincia invece la lascio vuota perchè sarà riempita dal javascript:

<select name="id_provincia">
<option>          </option>
<option>          </option>
<option>          </option>
<option>          </option>
<option>          </option>
<option>          </option>
<option>          </option>
</select>

Ho inserito nell’esempio 7 campi option vuoti per risolvere un problema di Netscape, (non riesce a creare nuovi fields nelle select, almeno così dicono in rete, io non ho provato). Per tutti gli altri browser è sufficiente creare la select vuota.

A questo punto manca il javascript, che va costruito interrogando il db nuovamente per creare gli array utilizzati per valorizzare la select della provincia:

<SCRIPT>
<!--
var prov=new Array();
var sigle=new Array();
<?php
$query = "SELECT * FROM regioni WHERE 1 ORDER BY nomeregione";
$result=mysql_query($query);
$counter=1;
while($row=mysql_fetch_array($result)){
$query2 = "SELECT * FROM province WHERE id_regione  = ".$row['id_regione']." ORDER BY nomeprovincia";
$result2=mysql_query($query2);
$counter2=0;
$str_prov="";
$str_sigla="";
while($row2=mysql_fetch_array($result2)){
if($counter2>0){  $str_prov.=","; $str_sigla.=","; }
$str_prov.='"'.$row2['nomeprovincia'].'"';
$str_sigla.='"'.$row2['id_provincia'].'"';
$counter2++;
}
echo   "prov[".$counter."]=new Array(".$str_prov.") \n";
echo   "sigle[".$counter."]=new Array(".$str_sigla.") \n";
$counter++;
}
?> function Riempi(source)
{
with (document.ins.id_provincia)
{
while (options.length > 0)
options[0]=null;
for (i=0;i<prov[source][/source].length;i++)
options[i]=new Option(prov[source][/source][i],sigle[source][/source][i])
options.selectedIndex=0;
}
}
//-->
</SCRIPT>

E questo è tutto!