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