13

Combo box is relatively easy to pick items from, but is less usable when it comes to see what you have already selected. Any recommendation on how to display results of the combo box selection? The goal is that it is easy for the user to see what has been selected at a glance without scrolling and also easy to make changes to the selection. (added later) Just found a good read about related topic about advantages and disadvantages of different multiple selection approaches http://www.ryancramer.com/journal/entries/select_multiple/

A couple of options I have so far:

enter image description here

I am not a huge fan of the option below, because it takes multiple clicks to select things and there are more controls which creates more cognitive load.

enter image description here

I could also consider have "view only" and "editable" modes but that would mean more coding so I am looking for some other ways.

Improve this question
1
  • What is the name of that add/remove select?
    – feelerino
    Nov 25 '20 at 18:17
15

While there are a few different ways to do what your asking; I prefer the "free tag" input method (not sure if there is a better name for this component). Basically users are allowed to enter in terms/tags/values into an makeshift input. Suggested/autocompleted terms terms/tags appear to the user as they type. As terms are completed/selected they appear in there own mini containers that also allow for single click removal.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Working example plugin can be found here: TextExt. Hope this helps!

Improve this answer
3
  • 1
    Working example also on this forum when you tag your questions!
    – sscirrus
    Jun 1 '12 at 1:39
  • 3
    I really think this is the best option for this type of scenario, only thing is it gets less and less readable as the number of options selected increases. On a side note, another similar control would be Chosen: harvesthq.github.com/chosen
    – GotDibbs
    Jun 1 '12 at 3:16
  • @GotDibbs: yes, when the number of selected items increases it gets less workable, but that is true for the alternatives (ie putting the selected items first in the drop-down list) as well.
    – Marjan Venema
    Jun 1 '12 at 7:39
9

The Chosen javascript plugin may be exactly what you're after. It compiles all previous selections in a nice stack while letting you continue to make selections.

Chosen screenshot

Improve this answer
4

Your first option is fine, except I'd list the selected items horizontally under the combo. This doesn't mess up your layout as much as the vertical list.

The solutions that put the selected items within the visible row do not scale beyond two or three very short items, not to mention long ones. They also don't let you easily remove your items, because you can't really to the X button thing. You need a click on the box to expand the box, so you won't be dividing it into several regions where clicking on some expands the box and clicking on others removes the item. The X thing works well outside the box itself.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

BTW, just to observe terminology - a combo box isn't one where you can select a combination of items, it's any dropdown in which you can also type. I'm not sure what the proper name of a checkbox dropdown is.

Improve this answer
2

I upvoted @JeggH's answer.

Though when the list of available items is not too long, this as another approach:

enter image description here

Improve this answer

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.