Selection dependent input fields with multiple-select at any level
30 Nov 2010 - 4:12pm
6 replies
1141 reads
Hi.
I'm looking for some examples of selection dependent inputs (selection of an option from one list determines the list of options made availablein the next list - I.e. region --> country) that allow multiple selections at any level of the hierarchy. For example, a user could select "oceania" from the region list and have all the countries in oceania appear in the countries list, or they could select "oceania" and "asia" from the region list and have the country list populate with all the countries from oceania AND asia.
Has anyone seen examples of this pattern?
Thanks,
Marcus
Comments
Hi Marcus,
I am fond of the way http://www.monster.com/geo/siteselection.aspx has designed the selection list.
Ali
Ali, thanks for the heads up. It's a great example of combining auto-suggest and faceted search. Thanks.
Hi Marcus,
We had to solve a similar problem. Here is the working prototype:
http://www.icograma.com/demos/optiontree/
Since the list could have hundreds or thousands of options, we used a tree with checkboxes, a search function, and a list reflecting chosen options. On the selected options list, each item's label shows the full hierarchy, since in our case many of the second level options had the same name under different groups.
Please let me know if this is of any help. Also feel free to improve on the design and code (I already spotted a couple of bugs while writing this ;-)
--
Santiago Bustelo
Icograma // design & development director
IxDA Buenos Aires
Santiago, that's a fantastic prototype! Thank you for sharing.
Hi Santiago - Nice design! I just noticed one thing - make sure the top level check boxes are only selected when *all* sub-cats are selected.
Marcus and WIlliam, thanks for your kind words!
Since it's just a prototype, there are several bugs and things to be improved. Although I am eager to deal with them, unfortunately I won't be able to do so in the near future.
Meanwhile, anybody is free and more than welcome to improve on this proposal.
--
Santiago Bustelo
Icograma // design & development director
IxDA Buenos Aires