In my web application, I need to request some data using a form

These data are selected in three levels, for example:

Project-> Order-> Product

I'm considering showing an element that would let the user select an option from a list. When they select from one element, then the next element will be populated based on their previous selection.

For example, if they select "project" # 1 then the selection box for "order" should show order # 1, # 2 and # 3.

If they then select order #2, then the selection box for "product" should show # 200, # 210, # 220, # 230, etc..

I have two possible ideas for the best solution. The first is to show the three elements, but initially put them in a disabled visual state. When someone selects something in from an earlier input, then the next input is enabled.

The second is to only show the first selection list, and then to progressively show later selection lists as the user makes selections from the ones they can see.

This I want to do with jquery ui, using the autocomplete widget.

I have two sketches of my solutions. Here are jsFiddles for my first and my second.

1 Answer 1


The final goal is to provide the correct product, right?

From which you can derive both order and project. Each of those two solutions doesn't allow to directly enter product: user has to remember and fill the whole dependency chain.

Why not just filter the data available for autocomplete based on filled values? E.g. user enter the order number, project number is filled automatically and list of available items in product input is reduced.

That's how filtering works in a few e-commerce sites (like amazon): you try to filter the results and find the target item, as long as you add more conditions you get smaller list of available ones.

  • In my case, remember the more dependent element is very unlikely. This idea comes from not having to remember the product, only the higher elements because of various causes, the last list element changes every day, for example, only show those who meet several conditions. the first list changes very little, the second change in a range that might call middle, but actually the third changes every day, even several times a day, according to other processes in the system, executingby other people. Aug 30, 2013 at 17:03
  • Even so it's still possible to remember one value instead of three, right? From those two options I think displaying both three inputs is better — user can clearly see necessary info he has to provide. With this option you can even emphasize the last input for better understanding that it's the target value, not Production or Order.
    – DeTeam
    Aug 30, 2013 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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