What is the best way of implementing something like this on a mobile device?

enter image description here

Which is an example of a multiselect dropdown box with a hierachy implemented in JQuery UI: http://jsfiddle.net/3jr2v/2/embedded/result/

From here: https://stackoverflow.com/questions/8781905/jquery-multiselect-nested-option

I am using JQuery Mobile.

My requirements are:

  • Around 5-30 checkboxes, depending on scenario
  • Hierarchy that may be multiple levels deep (5?), and then the ability to deselect all children by clicking on the parent
  • Doesn't make sense to use a 'autofill' 'autocomplete' control anywhere, as the user will not have any prior knowledge of what the options are

Some problems:

  • If the checkboxes aren't nested in an accordion style, then it might end up being a really really long list of checkboxes
  • If it is split into lists of checkboxes on different pages, how can I easily see a global view of everything that is selected? Is this too much effort?

I don't mind what the solution is, it doesn't have to be a single dropdown, it could be separate lists, pages... obviously screen real estate is at a premium. Anyone attempted something like this on a mobile device, or knows of any good examples?

Previous research:


enter image description here

I will go for such a solution.

If there is nested elements - give a visual cue.

If not - bypass

Hope that it helps.

  • Thanks, so each parent item would be like an accordion? So multiple nested accordions, each with a slight indentation on the checkbox buttons beneath? I think this would be fairly complex to construct but looks good to me. Jan 8 '14 at 15:17
  • My pleasure, before implementing it, you can ask to some other people, i did not ask to anyone. It is indeed complex but maybe there can be an easier way...
    – Abektes
    Jan 8 '14 at 19:36

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .