# you're reading...

sviluppo

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

Sperimentazioni:

Se volessimo usare Javascript per aggiungere degli elementi “Option” tramite il DOM ( Document Object Model ) sono sufficenti queste righe

Ma se volessimo caricare in modo dinamico il contenuto di un file simile a questo ? ( esempio.json )

Con l’aito di XHConn di cui ho parlato qualche giorno fa possiamo usare una funzione javascript come questa

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” )

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

… 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].

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

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]

Discussion

5 Responses to “Modificare le Select con DOM , Javascript e Ajax”

  1. Eccezionale, semplice, efficace. Complimenti. :)

    Posted by Luigi | 1 February 2006, 1:33 am
  2. Funziona perfettamente su Firefox, ha problemi però su IE. :(

    “text” è nullo o non è un getto.

    Come potrei risolvere? Sigh…

    Posted by Luigi | 1 February 2006, 10:43 am
  3. Non funziona un piffero su IE come dice Luigi…

    Posted by Fab | 13 November 2007, 11:17 am
  4. Ciao Fab,

    ho aggiornato il post, verificato e corretto.
    fai un prova con il codice che ho postato, adesso dovrebbe andare…
    cià

    Posted by Maurizio Pelizzone | 13 November 2007, 1:09 pm
  5. FANTASTICO!
    Funziona anche con doctype XHTML 1.1 content-type=”application/xml”

    Posted by Franky | 5 July 2008, 6:29 pm

Post a Comment

Info Autore

Mi chiamo Maurizio e quì scrivo di WordPress e delle cose che mi piacciono. Puoi seguirmi su Twitter, Facebook oppure una mail.

Recent Posts

notfound
Cose da approfondire per il 2013
January 2, 2013
By Maurizio Pelizzone
wordcamp-bologna-2012
WordPress Hardening [wordcamp bologna 2012]
November 26, 2012
By Maurizio Pelizzone
positano-estate-2012
Settembre 2012
September 7, 2012
By Maurizio Pelizzone
notfound
3 Librerie js/jquery da conoscere
June 7, 2012
By Maurizio Pelizzone
wordpress-cloudflare
CloudFlare: una CDN facile (e gratis)
April 25, 2012
By Maurizio Pelizzone

Twitter