Modificare le Select con DOM , Javascript e Ajax

Prefazione:
Quello che segue è il resoconto una serie di esperimenti per capire come utilizzare Ajax per migliorare l’usabiltà dei siti senza essere tropo invasivo

Definizione:
Il w3c definisce le select html con questa definizione:
“L’elemento SELECT crea un menu. Ciascuna scelta offerta dal menu è rappresentata da un elemento OPTION.”

Analisi:
Questa è la sintassi che conosciamo tutti
<br /> <select id="elemento-select"><option value="valore1">etichetta1</option><option value="valore2">etichetta2</option><option value="valore3">etichetta3</option></select>

Sperimentazioni:

Se volessimo usare Javascript per aggiungere degli elementi “Option” tramite il DOM ( Document Object Model ) sono sufficenti queste righe
<br /> objSelect = document.getElementById(“elemento-select”)<br /> objSelect.options[objSelect.options.length] = new Option(‘NuovaEtichetta1′,’NuovoValore1’);<br /> objSelect.options[objSelect.options.length] = new Option(‘NuovaEtichetta2′,’NuovoValore2’);<br /> objSelect.options[objSelect.options.length] = new Option(‘NuovaEtichetta3′,’NuovoValore3’);<br />

Ma se volessimo caricare in modo dinamico il contenuto di un file simile a questo ? ( esempio.json )
[<br /> {text:”NuovaEtichetta4″,value:”NuovoValore4″},<br /> {text:”NuovaEtichetta5″,value:”NuovoValore5″},<br /> {text:”NuovaEtichetta6″,value:”NuovoValore6″},<br /> {text:”NuovaEtichetta7″,value:”NuovoValore7″},<br /> {text:”NuovaEtichetta8″,value:”NuovoValore8″}<br /> ]

Con l’aito di XHConn di cui ho parlato qualche giorno fa possiamo usare una funzione javascript come questa
<br /> function FillSelect( ) {<br /> var fnCarica = function (oGet) {<br /> objSelect = document.getElementById(‘elemento-select’) ;<br /> var sJSON = oGet.responseText;<br /> var oJSON = eval(sJSON);<br /> for( nOpt=0;nOpt=oJSON.length;nOpt++) {<br /> objSelect.options[objSelect.options.length] = new Option( oJSON [n].text , oJSON [n].value )<br /> };<br /> };<br /> new XHConn().connect(‘esempio.json’, ‘GET’, ” , fnCarica);<br /> }

Osservazioni:

Il formato usato per il file esterno è chiamato JSON “JavaScript Object Notation”.
In questo esempio ho preferito usare questo formato rispetto ad xml in quanto lo ritengo più immediato.

Ovviamente al posto del file “esempio.json” ci potrebbe essere una pagina scritta in php o in qualsiasi altro linguaggio server-side che dopo una connessione ad un database ci potrebbe restituire un recordset formattato secondo la semantica json

Nella pratica dove una Select è riempita dinamicamente in conseguenza del contenuto di un’altra possiamo lanciare la funzione FillSelect dopo l’evento onchange della prima Select avendo cura di rendere disabilitata la seconda Select ( quella di destinazione ) sino alla fine del caricamento.

Aggiornamento del 26 Luglio 2006

Tramire DOM abbiamo visto come aggiungere un elemento, ma è anche possibile eliminarlo.
Per farlo e sufficente settare a “null” l’oggetto option desiderato.

partendo dal’esempio di prima questa è la sintassi nel caso volessimo eliminare il primo valore …
( la numerazione parte da 0 “zero” )

<br /> objSelect.options[0] = null<br />

se volessimo eliminare i primi due attenzione a non commettere questo errore …

<br /> objSelect.options[0] = null<br /> objSelect.options[1] = null<br />

… in questo caso elimineremmo il primo ed il terzo in quanto dopo ever eliminato il primo la numerazione del conteggio delle option riparte da 0 , quindi il quello che prima consideravemo il secondo valore e diventato il primo.

possiamo risolvere il problema in due modi: il primo consiste nell’eliminazione di option[0] per due volte, mentre il secondo ( forse più chiaro da leggere ) inverte semplicemente l’ordine di eliminazione, prima option[1] e poi option[0].

<br /> // primo metodo<br /> objSelect.options[0] = null<br /> objSelect.options[0] = null<br /> // secondo metodo<br /> objSelect.options[1] = null<br /> objSelect.options[0] = null<br />

Volessimo eliminare completamente il contenuto di una select allora potremo scrivere qualcosa del genere.

<br /> for( nOpt=0;nOpt=objSelect.options.length;nOpt++) { objSelect.options[0] = null };<br />

Refusi a parte dovrebbe funzionare.

Aggiornamento del 13 Novembre 2007

Metto a disposizione il codice di tutta la pagina che ho testato su FF, IE ed Opera
Fate attenzione al fatto che devono essere presenti XHConn.js ed il file json (nel mio esempio fill.txt)

[snippet=4125]