1

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:

2

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. – Adam Marshall 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.