Site icon Ryadel

JQuery - cross-browser show e hide di option e optgroup in una SELECT

HTML input type number with (localized) decimal values using JQuery

Oggi ho dovuto impiegare un pò di tempo per risolvere un problema di compatibilità cross-browser di un cliente, relativo a due elementi HTML <select> utilizzati  per consentire all'utente di selezionare regione e provincia. Le select funzionavano nel seguente modo:

  • ddlRegioni: contenente un elenco di regioni italiane, con possibilità di selezionare "tutte le regioni" (default).
  • ddlProvince: contenente un elenco di tutte le province italiane, raggruppate per regioni all'inetrno di appositi <optgroups>, con possibilità di selezionare "Tutte le province" (default).

le due caselle a discesa erano collegate da un semplice ma efficace script JQuery che aveva il compito di svolgere le seguenti operazioni: quando l'utente seleziona una regione all'interno della select ddlRegioni, lo script fa in modo di "nascondere" tutti gli <optgroups> presenti all'interno della select ddlProvince che non  corrispondono al nome della regione selezionata, ovvero tutti tranne uno: in questo modo la seconda select risulta "filtrata", lasciando all'utente la possibilità di selezionare una delle province di quella regione oppure "Tutte le province".

Questo è il codice HTML completo, diviso in 3 parti per comodità:

  • ddlRegioni - ovvero l'elemento select mediante il quale viene impostato il filtro:
  • ddlProvince - ovvero l'elemento select che viene "filtrato" al seconda della scelta effettuata sul precedente ddlRegioni:
  • Lo script JQuery che si occupa della logica di filtering:

Il problema

Il codice mostrato sopra funziona molto bene su Chrome e Firefox... ma, sfortunatamente, non su Internet Explorer. Il motivo è presto detto: IE, che come ben sa chi sviluppa in HTML/CSS/JavaScript non è particolarmente rispettoso degli standard, non esclude dalla visualizzazione gli elementi <optgroup> nascosti tramite JQuery, in quanto l'attributo di stile display:none non viene rispettato per quell'elemento: di conseguenza, sia l'elemento che il suo contenuto - ovvero, tutte le province di tutte le regioni non selezionate - restano visibili all'interno della casella a discesa.

La soluzione

Per risolvere il problema esistono numerosi workaround pubblicati sul sito StackOverflow e altri portali similari. Alcuni utenti suggeriscono di utilizzare appositi plugin JQuery esterni realizzati con il preciso scopo di risolvere questo problema (come ad es. l'ottimo Toggle Dropdown Options plugin): ho preferito non adottare questa soluzione per evitare di appesantire il mio codice con troppi script, preferendo orientarmi su alternative che utilizzassero JQuery standard.

Mi sono quindi imbattuto in alcune discussioni in cui veniva suggerito l'utilizzo del metodo jQuery.remove()al posto di jQuery.hide(), che ha una compatibilità cross-browser pressoché totale: una soluzione tutt'altro che ideale nel mio caso, visto che non potevo permettermi di eliminare a titolo permanente gli elementi <optgroup> in quanto l'utente avrebbe potuto cambiare più volte la regione selezionata.

Alla fine ho realizzato il seguente script, che utilizza una combinazione di jQuery.remove() e jQuery.clone() riuscendo così ad ottenere il risultato che mi serviva:

Lo script utilizza solo JQuery "vanilla" ed è compatibile con Chrome, Firefox, IE, Edge e qualsiasi altro browser. La logica di funzionamento è piuttosto semplice: viene creato un clone della select ddlRegioni, che viene poi utilizzato come "base dati" per caricare all'interno della ddlProvince l'<optgroup> corrispondente alla regione selezionata... oppure tutti gli <optgroup> se viene selezionata l'opzione "tutte le regioni".

Conclusioni

Per il momento è tutto: spero che questo articolo possa essere d'aiuto agli sviluppatori JavaScript alla ricerca di una soluzione "JQuery vanilla" per risolvere questo problema. Felice sviluppo!

Riferimenti

 

Exit mobile version