What's a good design for a "selectable" optgroup?

Design
1

I’m currently using an HTML select element with optgroup to display a categorized list of things. This provides a nice visual hierarchy of categories and items. For instance:

  • Allergies
    • Asthma
    • Hay fever
  • Arthritis
  • Liver Disease
    • Hepatitis A
    • Hepatitis B

The user might find what they want at level 2, like ‘Hay fever’. Some users might just want to select the generic ‘Allergies’. Some categories (like Arthritis) don’t have any subcategories to select. My current approach is to copy each category into the 2nd level:

  • Allergies
    • Allergies
    • Asthma
    • Hay fever

That approach is visually unappealing. The most common “solution” I’ve found is to skip the optgroups and adding non-breaking spaces to indent manually.

There are currently about 55 different choices, more to come. That seems like a lot for checkboxes. The select element seems like the right direction, but perhaps I’m going about this all wrong – suggestions welcome. Thanks!

Live example: koenpunt-chosen + optgroups - JSFiddle - Code Playground

Same question (though not mine) at Stack Overflow: Selectable <optgroup> in HTML <select> tag - Stack Overflow

2

I’ve found one pure-jQuery project that enhances the Twitter Bootstrap typeahead feature to support groups. It doesn’t currently support the selection of the categories, but it’s under 300 lines long; perhaps I could enhance it further. I still feel like my approach is wrong.

3

I don’t think the non-breaking spaces are a terrible idea. You could also offer two dropdowns where the first is required and the second is optional, scoped to the selection in the first.

4

Sounds to me more like tree-list than a drop down?
Have a look at something like: http://bootsnipp.com/snipps/collapsible-tree-menu-with-accordion
Might give you some more ideas at least…

5

Thanks for the suggestions. I’ll give the non-breaking spaces a try to see how it works and feels. Thanks for introducing me to Bootsnip – lots of inspiration there.

We were originally using two dropdowns, but had trouble. Users with Asthma would look for it in the first menu, not thinking to select Allergies in the first menu, then Asthma in the second. We also allow users to add items – so that confusion led to people adding things to list one – that were already on list two.

We are currently using the koenpunt fork of Harvest’s Chosen library of enhanced select menus. Chosen includes a search bar in the dropdown – so a user could type in “bite” and it would be found as Allergies / Insect bite. The koenpunt fork handles adding options that aren’t on the list.

You can see the current version of the updated version of my fiddle:

6

With the help of the sounding board here, I think I’ve come up with a workable solution. As one of my coworkers at Iris Associates used to say, “I have it all coded and tested. I just have to type it in.” Comments and ideas welcome.

The Harvest Chosen select replacement library provides everything I need now – except for the ability to select a category/optgroup. The library has really well-defined CSS classes. I think I can use a non-grouped select, then add styling to differentiate the categories and items. Since a category is no longer an optgroup, it is selectable.

I do lose a Chosen feature I like. If you use the search box, it displays the optgroup of the results it finds. In my example above, if you search for ‘asthma’, the display would show two lines, first the Allergies category, then the Asthma line. I can live with that for now. Perhaps I can figure out how to support that later.

When I finish the implementation, I’ll post it here. Thanks again for the sounding board.

7

As I re-read my plan, it sounded like a lot of change for one workaround. If the purpose is to select the categories – and those categories are generated by the Chosen library – why not just make optgroups selectable within the library? Two possible reasons: 1) The library contains about 650 lines of Coffeescript, quite a bit more to understand. 2) Risk of messing up other functions that depend on the category not being selected. I’ll ask the maintainers what they think.

8

I got the code changes to work, but it seemed like too much work. So I came up with another trial, inspired by the non-breaking spaces idea. The standard select would need non-breaking spaces, but I’m using the Chosen select replacement. Chosen is a jQuery plugin – and is styled via CSS.

I have a prototype that uses a standard select without optgroups – with the “group” items having different styling. I’ve asked for feedback in a Chosen issue, but I’m interested in all feedback. Thoughts?

Take a look via my fiddle.

9

@slothbear Overall I think this works well and is a good solution to your problem. The grey background for the main is distracting and makes me think that they aren’t possible selections. I think you can ditch it. I also wouldn’t name the first result ‘top’.

10

Thanks for the feedback, feedback with style! I got rid of the grey background, but left the bold on the categories. Or do you think the indentation is enough indication of the groupings?

11

@slothbear I think you could get away with just the indentation if you wanted but could certainly leave in the bold categories. Depends on how much you want to call out the categories.