1

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.

dropdown

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?

  • The Linux kernel and busybox use a custom configuration program that will deselect conflicts or select dependencies. Basically, You can start with a base list and based on each selection add/remove choices. – technosaurus Jun 27 '14 at 16:25
  • I'm not sure I understand what your scenario is. Do you think you could give a little more context, or maybe provide a simpler analogy? – Tim FitzGerald Jun 29 '14 at 4:14
  • 3
    Uhhh does it have to be a single control? This is not the most intuitive control to understand due to the complex interaction between items. Can you split this out into separate controls? i.e. user filter down for one thing: Van. Then a secondary dropdown appears with flatbed, reefer and step/drop deck. – nightning Sep 22 '14 at 19:28
2

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
0

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.

0

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.

  • Not quite the same. That question assumes you can select as many items as you wish. Where as here, the question states you cannot select some items together. – nightning Sep 22 '14 at 19:30
  • that's a complex question. good catch. – Danger14 Sep 23 '14 at 22:31

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.