Version 2.0 – Multi-select dropdown jQuery plugin
There are several types of ‘list page’ on FixMyStreet: for example, when you view all reports from a specific body, or when you log into your account to see reports you have made.
For quite a while now, users have been able to filter these by state (eg ‘fixed’ or ‘in progress’) or category (eg ‘pothole’, ‘streetlight’, etc), but a recent suggestion from Oxfordshire County Council prompted us to look again at this functionality and improve it.
So now it’s simple to filter by multiple states or categories: want to see all unfixed potholes? All streetlights or flytipping reports that are fixed? No problem.
<select multiple> is not the nicest tool in the box, especially when
it comes to actually selecting multiple options. It usually involves holding
down a key, but that key is different depending upon your operating system.
By default, it converts a multiple select into a dropdown with checkboxes:
The options can be wrapped within a container to stop the dropdown overlapping other content:
With options in the constructor, you can specify text for when all/no options are selected, and specify groups of options as presets that will be listed at the top of the dropdown:
On FixMyStreet, we have used this for both the state and category filters on list pages:
Let us know if you find the plugin useful!