Con questo script è possibile risolvere uno dei più comuni problemi di implementazione nella creazione di form. Parliamo dei menu a tendina (select) che cambiano i rispettivi valori in base alla selezione effettuata in un'altra select. Il caso più tipico, utilizzato anche nell'esempio proposto, è quello di menu con città che si adeguano alla scelta di regioni, stati o continenti. Il documento esempio.html allegato è al riguardo più che esplicativo.
La parte preponderante dello script è destinata alla creazione di un indice che associa i valori della seconda select a quelli della prima. In particolare, noteremo, il secondo menu viene opportunamente popolato dallo script in base alla nostra selezione.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
## 1: LA SEZIONE JAVASCRIPT
Iniziamo a vedere la parte Javascript, contenuta nella sezione <head> del documento. La prima sezione è quella con cui effettuiamo l'abbinamento tra i due menu. È molto importante avere ben chiara la struttura dei due menu, in modo da procedere speditamente. Nel nostro caso abbiamo un primo menu con i nomi dei continenti e un secondo con nomi di città situate in ciascuno di essi. Ecco come si presenta il codice:
<!--
var regiondb = new Object()
regiondb["africa"] = [{value:"102", text:"Cairo"},
{value:"88", text:"Lagos"},
{value:"80", text:"Nairobi"},
{value:"55", text:"Pretoria"}];
regiondb["asia"] = [{value:"30", text:"Ankara"},
{value:"21", text:"Bangkok"},
{value:"49", text:"Pechino"},
{value:"76", text:"New Delhi"},
{value:"14", text:"Tokyo"}];
regiondb["australia"] = [{value:"64", text:"Suva"},
{value:"12", text:"Sydney"}];
regiondb["europa"] = [{value:"11", text:"Atene"},
{value:"35", text:"Francoforte"},
{value:"3", text:"Londra"},
{value:"15", text:"Madrid"},
{value:"1", text:"Parigi"},
{value:"10", text:"Roma"},
{value:"6", text:"Stoccolma"},
{value:"97", text:"San Pietroburgo"}];
regiondb["noamer"] = [{value:"73", text:"Dallas"},
{value:"71", text:"Los Angeles"},
{value:"5", text:"New York"},
{value:"37", text:"Toronto"}];
regiondb["suamer"] = [{value:"65", text:"Buenos Aires"},
{value:"31", text:"Caracas"},
{value:"66", text:"Rio di Janeiro"}];
-->
Tre i punti chiave. Innanzitutto si dichiara un nuovo oggetto per ciascun continente. Attenzione: il nome dell'oggetto deve corrispondere al valore dell'attributo value del primo menu. Ma su questo torneremo dopo.
Subito dopo (badate alle parentesi!) si impostano i parametri con cui verrà popolato il secondo menu. Si tratta di due parametri. Value si riferisce al valore che sarà passato inviando il form. text, invece, al testo che apparirà nella select.
Nella seconda parte si crea la funzione (setCities) che provvederà a creare e a popolare la seconda select:
<!--
function setCities(chooser) {
var newElem;
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 :
null;
var cityChooser = chooser.form.elements["città"];
while (cityChooser.options.length) {
cityChooser.remove(0);
}
var choice = chooser.options[chooser.selectedIndex].value;
var db = regiondb[choice];
newElem = document.createElement("option");
newElem.text = "Seleziona una città:";
newElem.value = "";
cityChooser.add(newElem, where);
if (choice != "") {
for (var i = 0; i < db.length; i++) {
newElem = document.createElement("option");
newElem.text = db[i].text;
newElem.value = db[i].value;
cityChooser.add(newElem, where);
-->
Ci sono alcuni punti importanti da chiarire, quelli, in sostanza che si dovrà provvedere a personalizzare nel caso di riutilizzo dello script.
var cityChooser = chooser.form.elements["città"];
Questa riga dichiara il nome della seconda select (nell'esempio è "città").
var db = regiondb[choice];
La variabile db contiene, come si nota, il nome dell'oggetto creato nella prima parte (regiondb). Se si usa un altro nome nella prima parte, dunque, esso dovrà essere riportato di conseguenza anche in questo punto.
newElem.text = "Seleziona una città:";
Con questa riga, invece, si definisce il testo predefinito della seconda select.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il richiamo interno alla pagina Web è costituito essenzialmente da un form contenente due select:
<form name="form">
Invia la richiesta a:
<select name="continente" onchange="setCities(this)">
<option value="" selected="selected">Seleziona un
continente:</option>
<option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia/Oceania</option>
<option value="europa">Europa</option>
<option value="noamer">Nord America</option>
<option value="suamer">Sud America</option>
</select>
<select name="città">
<option value="" selected="selected">Seleziona una città:</option>
</select>
</form>
Se si osserva la prima select, si nota innanzitutto come il valore (attributo value) di ciascun item corrisponda alle variabili indicate nella prima parte.
Inoltre, è stato impostato l'evento onChange che richiama la funzione setCities. Significa che i valori del secondo menu cambieranno nel momento in cui si cambiano quelli del primo.
La seconda select, contiene solo un item, quello con il valore predefinito. Gli altri? Gli altri verranno creati al volo e conseguentemente dallo script.
