Nello script che presentiamo quando l'utente seleziona un elemento da una lista di categorie viene caricato un diverso insieme di elementi in una lista di sottocategorie.
Il codice è semplice da configurare e non richiede particolari modifiche. È compatibile con tutti i principali browser in circolazione.
- 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.
Inseriamo, prima di tutto, il seguente codice HTML all'interno dei tag <body> della pagina:
<table cellpadding=4 cellspacing=0 border="0">
<tr>
<form name=form method=post action="">
<td><span class=DefMenuText>Dipartimenti</span><br
/>
<select name='category' size=3 style="width:120;"
onChange='javascript:populateData( this.options[selectedIndex].text
)'>
<option>SALES</option>
<option>MARKETING</option>
<option>TECHNOLOGY</option>
</select>
</td>
<td><span class=DefMenuText>Utenti
Dipartimento</span><br />
<select name="SubCategory" size=3 style="width:120;">
</select>
</td>
</form>
</tr>
</table>
Il codice suddetto crea una tabella con due liste a scorrimento (select): una per le categorie e una per le sottocategorie.
Nella prima lista dobbiamo immettere le voci corrispondenti alle categorie che vogliamo inserire.
<option>SALES</option>
<option>MARKETING</option>
<option>TECHNOLOGY</option>
onChange='javascript:populateData( this.options[selectedIndex].text ),
all'interno del tag <select>, richiama la funzione JavaScript "populateData" al verificarsi dell'evento "Change", cioè quando si seleziona un altro elemento della lista. Questa stringa non va assolutamente eliminata.
Per ora lasciamo vuota la seconda lista a scorrimento: procederemo al suo riempimento attraverso il codice JavaScript. Attenzione qui a non modificare il valore della proprietà "name".
Inseriamo ora il seguente codice JavaScript tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
var arrayData = new Array();
arrayData[0] = 'SALES|[SAL] Utente 01|'
arrayData[1] = 'SALES|[SAL] Utente 02|'
arrayData[2] = 'SALES|[SAL] Utente 03|'
arrayData[3] = 'MARKETING|[MAR] Utente 01|'
arrayData[4] = 'MARKETING|[MAR] Utente 02|'
arrayData[5] = 'MARKETING|[MAR] Utente 03|'
arrayData[6] = 'TECHNOLOGY|[TEC] Utente 01|'
arrayData[7] = 'TECHNOLOGY|[TEC] Utente 02|'
arrayData[8] = 'TECHNOLOGY|[TEC] Utente 03|'
function populateData( name ) {
select = window.document.form.SubCategory;
string = "";
// 0 - mostra solo le nuove opzioni
// 1 - mostra la prima opzione esistente più le nuove opzioni
count = 0;
// Cancella la vecchia lista (se count = 0)
select.options.length = count;
// Inserisce nelle opzioni della lista tutte le categorie corrispondenti
for( i = 0; i < arrayData.length; i++ ) {
string = arrayData[i].split( "|" );
if( string[0] == name ) {
select.options[count++] = new Option( string[1] );
}
}
// Imposta quali opzioni della sottocategoria devono essere selezionate
// select.options.selectedIndex = 2;
// Da il focus alle sottocategorie
// select.focus();
}
</script>
Per personalizzare il contenuto delle sottocategorie dobbiamo popolare "arrayData":
arrayData[0] = 'SALES|[SAL] Utente 01|'
arrayData[1] = 'SALES|[SAL] Utente 02|'
&46;&46;&46;
Ogni voce dell'array è composta da due parti separate dal carattere "|". Nella prima parte va inserito il nome della categoria (deve corrispondere a quello digitato nel tag <option> del codice HTML), nella seconda inseriamo la stringa che vogliamo visualizzare. Chiudiamo la stringa con il carattere "|".
Vediamo ora quali elementi della funzione "populateData" dobbiamo personalizzare.
count = 0;
Questa variabile va impostata con il valore 0 se vogliamo che la lista di scorrimento ci mostri solo le nuove opzioni settate in "arrayData".
Se, invece, desideriamo inserire nella lista anche delle opzioni generiche da visualizzare sempre, dobbiamo impostare questa variabile sul valore 1. In questo caso ricordiamoci però di inserire le opzioni generiche all'interno dei tag HTML.
Possiamo anche fare in modo di selezionare automaticamente un'opzione di default tra quelle presenti nelle sottocategorie. Basta aggiungere la stringa:
select.options.selectedIndex = 2;
Il numero indica quale opzione va selezionata. Il conteggio inizia dal numero 0, quindi immettendo il valore 2 verrà selezionata la terza opzione.
Infine, possiamo dare il focus automatico alla lista delle sottocategorie aggiungendo la seguente stringa:
select.focus();
Altre modifiche non sono necessarie.
