JQuery – Cross-browser hide option and optgroup in a SELECT How to hide options and/or optgroups from a SELECT in all browsers, including Chrome, Firefox and Internet Explorer (IE)

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

Today I had to fix a nasty cross-browser compatibility issue involving two HTML <select> elements that worked in the following way:

  • ddlRegioni: a list of regions in Italy, with the chance to select “All Regions” (the default).
  • ddlProvince: a list of all city provinces in Italy, grouped by region using <optgroups>., with the chance to select “All Provinces” (default).

The two select are linked using a simple, yet effective “filter” logic implemented using a small JQuery script that works in the following way: if the user selects a region in ddlRegioni, the ddlProvince hides all the <optgroups> that don’t match the region name, leaving only one visible, so that the user will only be able to either pick a province in that region or “All Provinces”.

Here’s the full HTML code, splitted in 3 parts:

  • ddlRegioni – AKA the “filtering” select:
  • ddlProvince – AKA the “filtered” select:
  • The JQuery script:

The Problem

The above code works like a charm in Chrome and Firefox… but not on Internet Explorer: sadly, IE doesn’t enforce such behaviour: the style rule (display:none) is applied to the <optgroup> element but it doesn’t actually work, and the elements stay visible.

The Fix

I reviewed a couple of solutions and workaround on StackOverflow and other similar websites: most users managed to fix that using some external plugins (such as the Toggle Dropdown Options plugin), which wasn’t a good workaround for me since I wanted to find a solution using only vanilla JQuery; there were also some guys who suggested to just use the remove() JQuery function instead of hide(), which wasn’t ideal either in my scenario: I couldn’t permanently remove the <optgroup> elements from the DOM since I would need them whenever the user chooses a different region.

Eventually I came out with the following workaround, which is fully compatible with Chrome, Firefox, IE and should also work with any other browser as well:

The script only uses JQuery (no external plugins): it basically creates a in-memory clone of the “filtered” HTML <select> element, which is then used to selectively pull the required <optgroup> and append it to the “original” <select>, after having purged it from other (previous) optgroups.

Conclusion

That’s about it: I hope this post will be useful for those who are looking for a “pure JQuery” solution for this problem. Happy coding!

References

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.