UI: What are the different ways to display a Has and Belongs to Many relationship?

Question

This is not a question about a specific framework. I am using plain php with jquery. I am trying relate multiple products to multiple sets of options. That is each product can have multiple non-exclusive sets of options related to them. What would be the best way to represent this on screen? I suppose it could be a multiselect box. That could make it simple, but I would like to have another value named order to order the option sets on screen.

Any input, or a website with different UI techniques would be awesome! Thanks!

Answer 1

1) If there's a small # of options, you can use a grid (product in first column, options in columns 2==>N, and have check-box for selecting appropriate ones.

2) If OTOH you have more options (or grid doesn't do it for you for ordering reasons), you can also, instead of multi-select listing 1 option per line, have a single-select listing a set of options per line, with most common sets being first in the list. You can then have "Other" option at the bottom which, if selected, pops up a multi-select sprite for selecting option set that is not in the most common list.

The second solution is especially user friendly if there's either a very small set of commonly used option groupings, and/or there's a high correlation between many options.