Can a drop down have a list of items where only a few can be multi selected and the rest only selected once?

Question

I am design drop down list for a business application that has about 15 items and of those 15 items about 4 of them have 1 to many relationship, meaning those 4 can all be selected at once. However, the other 11 items are a 1 to 1 relationship, meaning you can only select one at a time.

My first instinct was to just have checkboxes next to the items that have a one to many relationship and if 2 items are select I would disable any items that do not fit into the relationship.

Here is a screenshot of what I am talking about. As you can see with Van selected Step/Drop Deck is greyed out because there is no relationship between Van and Step/Drop Deck. However, Van does have a relationship with Flatbed and Reefer so those remain enabled.

So far in my experience I have not seen this UI done anywhere and I was wondering if someone has experienced a similar problem and how you solved it, or if you haven't seen this problem how would you solve it?

Answer 1

How many combinations are there and are the users familiar with them? If they tend to know what they want, why not have list with "Van", "Van + Flatbed", etc, to cover the special combinations. If you do auto-complete, they can simply type "V" to get all the "Van..." options and select what they need.

Even if you have to allow a simple UI to add new combinations as they become apparent, that'd be much simpler and way more intuitive than the suggested UI in the question.

Alternatively, depending how the combinations mix, I'd probably opt for Radio Buttons for main options, then child-Check/Radio for the special options:

(*) Van
     [X] Flatbed
     [ ] Reefer
( ) Container

Answer 2

This approach might show your ability to come up with smart solutions 😊

You have added everything in a drop down menu that can be put on a page. This makes the code really lengthy and hard to maintain across browsers.

But from the perspective of a user, this is a bit complicated. A user might not have previously been exposed to a menu like this plus if your site works on mobile things will get really complicated. My suggestion is that you better have some really well designed check boxes and radio buttons. This will not confuse the user, keep your code easy and maintainable and work across all browsers.

Answer 3

I believe your answer is in this QA: Ways to select a group or individual items from fair sized list.

Either of the answers given: Chosen jQuery plugin or custom developed code works like your initial idea only without checkboxes.