IE e l’innerHTML nelle select box

Di recente mi è capitato di dover realizzare una semplice paginetta con due menù a tendina: il primo per la selezione della regione, il secondo con le province, popolato tramite una chiamata in Ajax al database. Il file PHP restituisce un semplice elenco di <option> e riempie la select box delle province utilizzando la proprietà “innerHTML” dell’elemento.

Credo sia inutile dire che la cosa funziona su tutti i browser, tranne uno: si, in 8 anni non sono ancora riusciti a correggere questo baco. No, neanche nelle ultime due versioni. Si accettano scommesse sul fatto che il baco rimarrà anche nella versione 9 di prossima uscita.

Googlando un po’ ho trovato diverse soluzioni: diversificare l’applicativo a seconda del browser in uso (rifare l’applicativo per Internet Explorer? state freschi!), rifare l’applicativo popolando non la select ma il div che la contiene (ma in questo modo la select creata non viene riconosciuta da Firefox e Chrome), utilizzare funzioni chilometriche create appositamente (ne avevo trovata una fatta abbastanza bene, ma restituiva i risultati in minuscolo e non andava con IE 8).

Alla fine ho trovato su un blog questa soluzione, piuttosto semplice ma efficace, e l’ho leggermente personalizzata:

if(document.all) //IE
{
//Aggiunge una opzione fittizia
opts = ‘<option>opzione</option>’ + ajaxRequest.responseText;
}
else //browser normali
{
//Risposta Ajax senza aggiunte
opts = ajaxRequest.responseText;
}

//Riempie select box
document.getElementById(“province”).innerHTML=opts;

//Forza refresh della select box in IE
if(document.all)
{
document.getElementById(“province”).outerHTML = document.getElementById(“province”).outerHTML;
}

Supponendo di avere come risposta ajax il nostro bel set di <option>, se il browser è Internet Explorer viene aggiunta una prima option fittizia, che sarà rimossa automaticamente (!) dal “browser”; in caso contrario viene utilizzata la risposta ajax, così come fornita dal nostro applicativo PHP. Una volta riempita la select box con i valori, viene forzato il refresh della stessa, per fare in modo che con Internet Explorer non risulti vuota.

Spero che questa soluzione possa essere utile a chi, come me, ha perso diverse ore a cercare di risolvere questo baco :D

1 commento a “IE e l’innerHTML nelle select box”

alexdi66  ·  20 Novembre 2010 alle 17:04

Grazie 1000 per la dritta. Mi raccomando ragazzi/e, abbandonate definitivamente I.E. !! E poi il bello è che l’ “innerHTML” , se non mi sbaglio, l’ hanno inventato proprio loro!.
Mah.

Grazie ancora.
Alessandro.

Lascia un commento


Rimaniamo in contatto?

© 2022 - Pier Antonio Romano
ogni riproduzione è vietata

Privacy & Cookie Policy