Firefox e i menù select che non si aprono: come risolvere il problema

Normalmente l'uso del tag select non dovrebbe comportare alcun problema, in quanto, in condizioni "ideali" (ovvero in assenza di bug nelle implementazioni dei browser), ciascun browser dovrebbe adattarne la visualizzazione in base al numero di elementi e allo spazio disponibile sullo schermo. Ad ogni modo, con Firefox 28 e versioni precedenti, può capire che se il menù a tendina in corrispondenza del tag select contiene un numero molto alto di elementi, anche centinaia, semplicemente il menù non si apre. In tale circostanza, che si è verificata nella pagina seguente (che richiede un login), Internet Explorer e Chrome risolvono il problema a modo loro, ma in modo comunque non necessariamente soddisfacente, perché Internet Explorer occupa tutto lo schermo con il menù a tendina e Chrome, invece, rimpicciolisce sensibilmente i caratteri del menù:
http://www.utiu-students.net/index.php/file-sharing/upload

Ho trovato una soluzione per il problema con un approccio tramite javascript, che permette di fissare il numero di elementi che ciascun browser dovrà visualizzare nel menù a tendina. A tale scopo, poiché il codice javascript che inizialmente avevo scritto non funzionava, ho fatto una richiesta su stackoverflow, a cui sono seguite rapidamente alcune risposte:
https://stackoverflow.com/questions/22910337/add-onfocus-onblur-and-onchange-on-every-select-tag

Ecco infine il codice che ho utilizzato, che fissa a "10" il numero di elementi da visualizzare: l'ho inserito a fine pagina, prima del tag </body>

<script>
// Fix per Firefox - Non permette di aprire il menù a tendina (drop-down select box) quando ci sono troppi elementi
// https://stackoverflow.com/questions/22910337/add-onfocus-onblur-and-onchange-on-every-select-tag
// obiettivo: onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'
var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
    sels[i].onfocus = function () {
        this.setAttribute("size", "10");
    }
    sels[i].onblur = function () {
        this.setAttribute("size", "1");
    }
    sels[i].onchange = function () {
        this.setAttribute("size", "1");
        this.blur();
    }
}
</script>

Happy hacking a tutti,
Francesco Galgani