Mappa interattiva con jquery ajax e php.

[maforast]

Salve a tutti, sto cercando di fare una mappa interattiva con gli script in oggetto.
Vi posto un pò di codice con la speranza che mi aiutiate lì dove mi sono bloccato.

Parte jquery ajax

function riempiCampoForm(){
		$(document).ready(function()
 		{
		var $bigMap=$('#div_regioni');
		$('area').click(function(){
			var regionId=$(this).attr('alt');
			$bigMap.slideUp('fast', function(){
				$('#'+regionId).slideDown('fast');
				$('div#divP').show();
			});
		});
		
		$('#selReg').change(function(){
			var regione = $('#selReg').attr('value');
			$.post("selection.php", {idregione:regione}, function(data){	
			$("div#divP").empty();
			$("div#divP").prepend(data);
						});
			});
						
		$('button').click(function(){
			$(this).parent('.regions').hide();
			$('div#divP').hide();
			$bigMap.show();
		});
		});
		
		}		

$(document).ready(function(){
  			$('area').click(function(){
      		var title=$(this).attr('alt');
     		$("#selReg").val( $(this).attr('optionVal') );
      		$("#selPrv").val( $(this).attr('optionVal') );
			});
      	});

In pratica quì faccio delle chiamate a una funzione php

public function ShowRegione()
		{
			$sql = "SELECT * FROM regioni ORDER BY nomeregione ASC";
			$res = mysql_query($sql,$this->conn);
 
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idregione'] . '">' . $row['nomeregione'] . '</option>';
				}
 
			echo '</select>';
		
		}
		
		public function ShowProvincia()
		{
		
			$sql = "SELECT * FROM province where idregione=$_POST[idregione] ORDER BY nomeprovincia ASC";
			echo"<div id=selPrv class=divFormGeoTh style=position:relative;top:3px>Provincia</div>";
			echo" <div class=divFormGeoTd>";
			echo "<select id=selPrv name=idprv class=selFormGeo >";
			
			$res = mysql_query($sql,$this->conn);
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idprovincia'] . '">' . $row['nomeprovincia'] . '</option>';
				}
 
			echo '</select>';
		
		}
		
 
		public function ShowComune()
		{
			if($_POST['idprovincia'] == "*")
			{
				die;
			}
 
 		 		
			$sql = "SELECT * FROM comuni WHERE idprovincia=$_POST[idprovincia]";
			$res = mysql_query($sql,$this->conn);
				echo'<option value="*">Scegli...</option>';
				while($row = mysql_fetch_array($res))
				{
					echo '<option value="' . $row['idcomune'] . '">' . strtolower($row['nomecomune']) . '</option>';
				}
  
		}

per valorizzare le regioni, le province e i comuni. al tempo stesso se clicco su una regione della mappa italiana vengono modificate le entry nelle select e viene esplosa la mappa della regione al posto della mappa italiana. A sua volta la mappa della regione è mappata con le province con il classico map area html. A questo punto vorrei fare diverse cose:

1) avere la possibilità di cambiare mappa quando nella select delle regioni modifico la regione.

2) poter mostrare le select hidden anche se non opero sulla mappa ma modifico le select.
Ovvero vorrei che il comportamento fosse biunivoco nel senso che ho le stesse azioni, sia se agisco sulla mappa sia se agisco sulle select.

In questo momento la cosa funziona a metà solo se clicco sulla mappa ma se cambio regione dalla select non mi viene cambiata la mappa (non so come fare)

di seguito metto il codice html

<div id="div_regioni" >					
<img src="http://forum.mrwebmaster.it/images/italia.gif" alt="" width="270" height="300" usemap='#Map'/> 
<map name="Map" id="Map">
...  
  <area title="Campania" shape="poly" coords="165,162,187,162,193,170,197,171,194,176,194,183,199,192,200,197,194,198,187,194,186,183,181,180,177,180,176,177,167,175"   onclick="riempiCampoForm();" alt="Campania" optionVal="8" />
...
	</map>
</div>

<div id="Campania" class="regions"><button>Italia</button>- Campania
<div id="div_province" ><img src="http://forum.mrwebmaster.it/images/campania.gif" alt="" width="279" height="260" usemap='#camp'/>
  <map name="camp" id="camp">
<area id="_map_sal" title="Salerno" shape="poly" coords="164,131,191,139,203,115,224,139,234,158,242,180,257,194,272,211,259,221,253,234,234,238,221,255,198,238,169,211,175,199,162,168,126,133,116,145,113,125" href="#" alt="Salerno" optionVal="38" />
  ..
  </map>


<div id="divR" class="divFormGeoTr">
			<div class="divFormGeoTh" style="position:relative;top:3px">Regione</div>
			<div class="divFormGeoTd">
				<select id="selReg" name="selReg" class="selFormGeo" onchange="" >
					<option value="" class="noselect">Seleziona</option>
					<?php
					include 'option.class.php';
					$obj = new Option();
					$obj->ShowRegione();
					?>
					</select>
			</div>
			</div>
		<div id="divP" class="divFormGeoTr" style="display:none">
			<div class="divFormGeoTh" style="position:relative;top:3px">Provincia</div>			
				<div class="divFormGeoTd">
			<select id="selPrv" name="selPrv" class="selFormGeo" >
				<option value="" class="noselect">Seleziona</option>
			</select>
			</div>
			</div>
		<div id="divC" class="divFormGeoTr" style="display:none"></div>
		<div id="divZ" class="divFormGeoZoneTr" style="display:none"></div>

Grazie per l'attenzione e per i preziosi consigli