Gli array associativi in Javascript ...

Oggi ho proprio voglia di scrivere qualcosa di tecnico.
Alla fin fine per guadagnarmi il pane faccio il programmatore e condividere delle soluzioni puo' essere utile (e questo tutti gli sviluppatori lo sanno!).
Quindi, il problema che dovevo risolvere era questo:

"In una jsp, selezionando un valore da una select bisogna riempirne opportunamente un'altra."

Non sembra la fine del mondo ... uno potrebbe dire: "che ci vuole!"
Ok, ma quando i dati sono dinamici e presi da un DB ... forse non e' cosi' banale.
E poi ad ogni valore della prima select alla seconda sono associati un numero variabile di elementi.
Mi serviva una soluzione semplice ed efficacie, che si potesse dinamicizzare.

Ho risolto il problema con gli array associativi in javascript.

Vediamo prima di tutto cos'e' un array associativo. In javascript si puo' definire cosi':

arrayAssociativo = new Array();
arrayAssociativo["Val1"] = "SubVal1";
arrayAssociativo["Val2"] = "SubVal2";
arrayAssociativo["Val3"] = "SubVal3";

E per recuperare un valore basta usare, ad es: arrayAssociativo["Val1"];

Quindi possiamo appunto "associare" ad una stringa un altro oggetto.

Un altro modo per definire l'array associativo (ed e' quello che preferisco) e' questo:

var arrayAssociativo = {"Val1":"SubVal1", "Val2":"SubVal2", "Val3":"SubVal13};

Molto piu' "professionale" direi :)

Cmq, il trucco sta in questa seconda definizione, infatti (complicando le cose) posso scrivere un array associativo di questo tipo:

var arrayOfValue = [{firstValue: 'Val 1', secondValue: new Array('SubVal 1-1', 'SubVal 1-2', 'SubVal 1-3', 'SubVal 1-4')}, {firstValue: 'Val 2', secondValue: new Array('SubVal 2-1', 'SubVal 2-2')}, {firstValue: 'Val 3', secondValue: new Array('SubVal 3-1', 'SubVal 3-2', 'SubVal 3-3')}];

In pratica ho associato alle stringhe che stanno su firstValue un array semplice sul secondValue.

La funzione javascript che gestisce lo switch dei valori si puo' scrivere cosi':

// Funzione per eseguire lo switch
// I parametri:
// destination - la select di destinazione
// value - il valore della prima select
function fillSelect(destination, value) {

// verifico se e' stata fatta una scelta valida
if(value == undefined || value == "") {
destination.setAttribute('disabled', 'disabled');
return;
}

// svuoto la select
while( destination.childNodes.length >= 1 ) {
destination.removeChild( destination.firstChild );
}

// il primo elemento e' vuoto
destination.options[0] = new Option('', '');

// itero l'array associativo per trovare il valore giusto
var arraySecondValues = [];
for(var j=0; j < arrayOfValue.length; j++) {
if(arrayOfValue[j].firstValue == value) {
arraySecondValues = arrayOfValue[j].secondValue;
break;
} else {
continue;
}
}

// adesso itero l'array recuperato
// con i valori da copiare nella seconda select
for(var i=0; i < arraySecondValues.length; i++) {

// uso "i + 1" perche' ho gia' definito il primo elemento
// della select con uno spazio vuoto
destination.options[i + 1] = new Option(arraySecondValues[i], arraySecondValues[i]);
}

destination.options.length = i + 1;
destination.removeAttribute('disabled');
}

Il codice html:

<form name="testForm" method="post" action="" id="testForm">
Prima select: <br/>
<select name="firstSelect" onchange="fillSelect(document.testForm.secondSelect, this.value);">
<option value=""></option>
<option value="Val 1">Val 1</option>
<option value="Val 2">Val 2</option>
<option value="Val 3">Val 3</option>
</select>
<br/><br/>
Seconda select: <br/>
<select name="secondSelect" disabled="disabled"><option value=""></option></select>
</form>

Ed il gioco e' fatto. L'unica cosa che dobbiamo dinamicizzare nella nostra jsp e' l'array associativo e i dati della prima select. Io ho usato un bean con due liste riempite con i dati presi dal DB per poi utilizzare la funzione JSTL <c:forEach> a dovere.


Per testare il codice:
Prima select:


Val 1
Val 2
Val 3

Seconda select: