I want to implement dependent drop-down feature on a web page in my website containing the following drop-downs:
- User’s group name
- Group events (dependent drop-down)
- Locations (dependent drop-down)
Now, what I want is according to the selected option in the first drop-down that is group name (the other two will be disabled until it is selected), the list of events is displayed; only those values relevant to the selected group name should occur. Similarly, the values of locations should be in relevance to the group name and the event selected. Not only this, but I also want the design to be irrelevant of the level of dependencies or the current order (group name->events->locations). Even if I wish to add timings as another level of dependency, the design should incorporate it.
Now, in all the related questions to this problem tables are used to store data in databases like:
Best Data structure for dependent dropdown implementation- Two dependent drop-down lists with the values in two different
tables - Saving data of dependent drop-down – Yii
However, I wish to consider the following alternatives:
- Trie: Since the order in which the attributes are selected is
defined, we could use a trie to store all possible combinations of
the list of values in each drop-down dependent on each other. Using
prefix search, we could retrieve the values of the next drop-down,
according to value selected in the previous one. - Table: similar to one used in above, we can store it in database but
then the number of levels of dependencies are not really fixed and
can increase in future. How do I handle that? (Assuming I don’t want
to modify the schema every time this happens) - Graph: We could also store the possible combinations in a directed
graph and based on the values selected we can display all the next
adjacent nodes int he next dependent drop-down.
Which of these is a best approach, keeping in mind future extensibility or changes? Or any other suggestions for data structures are also welcomed. Please explain with proper design in detail considering complexity in mind.
You’re almost certainly overthinking this. Your quest for an ideal data structure is a solution in search of a problem.
Look carefully at the example you gave. All three of those dropdowns have a different data source, and they imply a relational structure. Just by looking at the names of your dropdowns, I know that you have three tables: Groups, Events and Locations, each having primary keys and foreign keys that associate the tables with each other.
Three tables in a relational database is the ideal data structure for your scenario.
If you need a data representation that can be used in a web page, create a ViewModel object, but in non-trivial applications, it’s often necessary to AJAX in the list for a particular dropdown, based on the selection provided by the user in the previous dropdown. The lists can be too large to embed in the actual web page.