blob: aaa5c9fa98295efebd0895894ac1b1c3440b3051 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
---
layout: post
title: Version 2.0 – Multi-select dropdown jQuery plugin
author: zarino
---
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.
HTML's `<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.
So I looked at existing JavaScript plugins and finding nothing suitable created
a very simple jQuery plugin which is available at
[https://github.com/mysociety/jquery-multi-select](https://github.com/mysociety/jquery-multi-select).
By default, it converts a multiple select into a dropdown with checkboxes:
<img src="/assets/posts/multi-select-people.png" alt="">
The options can be wrapped within a container to stop the dropdown overlapping other content:
<img src="/assets/posts/multi-select-line-wrap.png" alt="">
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:
<img src="/assets/posts/multi-select-groups.png" alt="">
On FixMyStreet, we have used this for both the state and category filters on list pages:
<img src="/assets/posts/multi-select.png" alt="">
Let us know if you find the plugin useful!
|
