JIG: Javascript Italian Geo-Package

Regioni Province Comuni CAP Italiani

Il Javascript Italian Geo-Package (JIG) è uno script che consente la selezione di regioni province, città e cap.
E’ nato con l’intento di automatizzare la scelta dei dati territoriali italiani e fornire allo sviluppatore la possibilità di evitare inconsistenza nell’immissione dei dati degli utenti.
Il package include tutte le regioni, tutte le province, tutte le città e tutti i CAP consentendo una selezione su di essi a cascata, ovvero, scegliendo ad esempio la regione si attiverà il campo provincia, mostrando l’elenco delle province corrispondenti.
Lo script è puro codice JavaScript, quindi non ha stili CSS applicati, inoltre è stato testato sui browser: IE6, IE7, Mozilla FireFox 2.0, Opera 9 e Safari.
Nello specifico il package si compone di:

  1. geo_regioni.js, geo_province.js, geo_comuni.js, geo_cap.js: che contiengono i dati territoriali
  2. geo_utility.js: che contiene i metodi accessori

Dopo l’inclusione dei due files nella pagina desiderata e nel dominio/i scelto/i, è necessario e sufficiente inizializzare i campi e chiamare le funzioni come segue:

  • nel tag <body> inserire l’attributo onload con valore “javascript: carica_regioni();”
  • creare i tag <select> con i seguenti attributi (obbligatori)
    1. name=“regione”
    2. id=“regione”
    3. onchange=“carica_province();”
  • creare gli altri tag con nome e id singolare, e con il metodo all’attributo onchange in forma carica_[item_plurale]().

Ecco un esempio e il relativo codice, a fondo pagina.




Regione
Provincia
Cittą
CAP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JIG: Javascript Italian Geo-Package - Regioni Province Comuni CAP Italiani</title>
<script type="text/javascript" language="javascript" src="geo_regioni.js"></script>
<script type="text/javascript" language="javascript" src="geo_province.js"></script>
<script type="text/javascript" language="javascript" src="geo_comuni.js"></script>
<script type="text/javascript" language="javascript" src="geo_cap.js"></script>
<script type="text/javascript" language="javascript" src="geo_utility.js"></script>
</head>

<body onload="carica_regioni();">

<table align="center" width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Regione</td>
<td><select name="regione" id="regione" onchange="carica_province();"></select></td>
</tr>
<tr>
<td>Provincia</td>
<td><select name="provincia" id="provincia" onchange="carica_città();"></select></td>
</tr>
<tr>
<td>Città</td>
<td><select name="città" id="città" onchange="carica_cap();"></select></td>
</tr>
<tr>
<td>CAP</td>
<td><select name="cap" id="cap"></select></td>
</tr>
</table>

</body>
</html>

Sviluppo siti web - Andrea Infusino