Come molti degli ultimi StaffScript, anche questo nasce da una domanda posta molto frequentemente nel newsgroup: "Come faccio a popolare dinamicamente una <SELECT>?"
      Ci sono varie situazioni in cui si rende necessario gestire una lista, per esempio si fa scegliere al visitatore una marca di auto, e poi gli si presentano già pronti i modelli fra cui scegliere, oppure, caso pià frequente e che ho usato per il mio esempio, si fa scegliere al visitatore una regione, e poi una delle provincie, o magari, in un negozio di e-commerce, dato un "pezzo" di un computer (monitor, hard disk, processore), gliene si fa scegliere il modello.
      Lo script questa volta lo commentiamo per intero, è da un bel po' di tempo che non lo facciamo! :-)

      Cominciamo dalla parte HTML, che ha bisogno di un commento particolare:

<FORM NAME="modulo">
<SELECT NAME="input" onChange="Riempi(this.options.selectedIndex)">
	<OPTION>Puglia</OPTION>
	<OPTION>Basilicata</OPTION>
	<OPTION>Sardegna</OPTION>
</SELECT>
<SELECT NAME="output">
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
</SELECT>
</FORM>

      Abbiamo, innanzitutto, due liste SELECT: una lista "input" ed una "output" (le Regioni e le Provincie nell'esempio). La lista di input la compileremo direttamente nella pagina HTML, riporterà l'elenco delle regioni. Notate che non ho valorizzato il parametro "VALUE" delle OPTION perché mi basta il "selectedIndex" per lo script. Questa prima lista contiene, nel tag <SELECT> un event-handler "onChange()" che attiva la funzione Riempi() passandogli il numero della OPTION selezionata (this.options.selectedIndex).
      la seconda <SELECT> è un po' strana: contiene 8 <OPTION> piene di spazi (il numero non è importante, potrebbero essere 4 o 200). Queste <OPTION> vuote sono necessarie per mantenere compatibilità con Netscape. Questo browser, infatti, a differenza di Explorer, non aggiorna dinamicamente le caratteristiche della lista (altezza e larghezza della colonna) man mano che gli cambiamo i valori, e le <OPTION>vuote ci servono per dargli degli ingombri di default, poi una volta riempita la lista, all'apertura del menu i testi si vedranno per intero, ma finché la lista è vuota (all'apertura della pagina) il browser visualizzerebbe un'option larga un paio di spazi, ed, una volta riempito, scrollerebbe le option nell'altezza di una sola. Naturalmente se nel sorgente della pagina gli mettiamo dei dati di default (potremmo preimpostare una regione con le sue provincie) questi <OPTION> vuoti non servirebbero.

      Passiamo ora allo script, che è di fatto abbastanza semplice:

<SCRIPT>
<!--
var prov=new Array();
   prov[0]=new Array("Lecce","Foggia","Brindisi","Taranto","Bari");
   prov[1]=new Array("Potenza","Matera");
   prov[2]=new Array("Cagliari","Nuoro","Oristano");

var sigle=new Array()
   sigle[0]=new Array("LE","FG","BR","TA","BA");
   sigle[1]=new Array("PT","MT");
   sigle[2]=new Array("CA","NU","OS")

function Riempi(source)
   {
   with (document.modulo.output)
     {
     while (options.length > 0)
       options[0]=null;
     for (i=0;i<prov[source].length;i++)
       options[i]=new Option(prov[source][i],sigle[source][i])
     options.selectedIndex=0;
      }
   }
//-->
</SCRIPT>

      All'inizio troviamo due array: "prov" e "sigle" che contengono rispettivamente il nome della provincia, e la sigla automobilistica.
      Subito dopo abbiamo l'unica funzione dello script: Riempi(). Questa funzione accetta un parametro in ingresso (source) che è l'indice selezionato nella lista di input. Ovviamente ad ogni indice corrisponderà uno degli array secondari di "prov". Di seguito abbiamo il solito with ([oggetto]) che ci consente come al solito di usare pià di una proprietà o metodo sullo stesso oggetto senza doverlo ogni volta identificare per intero.
      Dentro al with () abbiamo due cicli successivi: il primo si occupa di eliminare tutti gli elementi attualmente presenti nella lista, togliendo sempre la prima <OPTION> finché non le ha tolte tutte.
      Il ciclo usato è equivalente a: for (i=0;i<options.length;i++) {options[i]=null;}
      Poi abbiamo il ciclo di riempimento. Un indice (i) conta da zero fino alla lunghezza dell'array scelto (la provincia) ed esegue il riempimento della lista:
      options[i]=new Option(prov[source][i],sigle[source][i])
      Viene creata la nuova opzione (new Option()) cui viene passato come primo parametro il nome della provincia (la parte visibile nel browser della option), e come secondo la sigla automobilistica (il VALUE in pratica).
      La i-esima new Option() viene assegnata alla i-esima <OPTION> che stiamo creando nella lista (options[i]), e questo finché non si conclude il ciclo for()
      Questa era la parte importante dello script: per cambiare il contenuto di una lista, bisogna prima cancellarne tutte le opzioni esistenti, e poi crearne delle nuove.

      Potremmo fermarci qui, se non ci servisse un'ultimo trucco per terminare la compatibilità con Netscape: dobbiamo dirgli di selezionare la prima opzione di quelle appena create, per evitare che il valore visibile resti vuoto finché non selezioniamo. Ci basta usare l'onnipresente selectedIndex questa volta in scrittura invece che in lettura, per dargli un valore invece di leggerlo: options.selectedIndex=0; rende visibile il primo elemento della lista appena riempita, esattamente come se nell'HTML scrivessimo <OPTION VALUE="valore" SELECTED>qualcosa</OPTION>.

      A questo punto abbiamo finito, abbiamo creato un piccolo database (le provincie con le relative sigle) e lo usiamo completamente dal alto client.

      Buon divertimento! :-)