Question

We currently have a form with the standard multi-select functionality of “here are the available options, here are the selected options, here are some buttons to move stuff back and forth.” However, the client now wants the ability to not just select certain items, but to also categorize them. For example, given a list of books, they want to not just select the ones they own, but also the ones they’ve read, the ones they would like to read, and the ones they’ve heard about. (All examples fictional.) Thankfully, a selected item can only be in one category at a time.

I can find many examples of moving items between listboxes, but not a single one for moving items between multiple listboxes. To add to the complication, the form needs to have two sets of list+categories, e.g. a list of movies that need to be categorized in addition to the aforementioned books.

EDIT: Having now actually sat down to try to code the non-javascripty bits, I need to revise my question, because I realized that multiple select lists won’t really work from the “how do I inform the server about all this lovely new information” standpoint. So the html code is now a pseudo-listbox, i.e. an unordered list (<ul>) displayed in a box with a scrollbar, and each list item (<li>) has a set of five radio buttons (unselected/own/read/like/heard).

My task is still roughly the same: how to take this one list and make it easy to categorize the items, in such a way that the user can tell at a glance what is in what category. (The pseudo-listbox has some of the same disadvantages as a multi-select listbox, namely it’s hard to tell what’s selected if the list is long enough to scroll.) The dream solution would be a drag-and-drop type thing, but at this point even buttons would be OK.

Another modification (a good one) is that the client has revised the lists, so the longest is now “only” 62 items long (instead of the many hundreds they had before). The categories will still mostly contain zero, one, or two selected items, possibly a couple more if the user was overzealous.

As far as OS and stuff, the site is in classic asp (quit snickering!), the server-side code is VBScript, and so far we’ve avoided the various Javascript libraries by the simple expedient of almost never using client-side scripting. This one form for this one client is currently the big exception. Give ’em an inch and they want a mile…

Oh, and I have to add: I suck at Javascript, or really at any C-descendant language. Curly braces give me hives. I’d really, really like something I can just copy & paste into my page, maybe tweak some variable names, and never look at it again. A girl can dream, can’t she? 🙂

[existing code deleted because it’s largely irrelevant.]

Answer 1

Well, nobody seems to want to do my work for me, so here’s what we ended up doing. (It’s not entirely done yet; when it is, I might post the code just for completeness’ sake.)

We’ve taken the plunge and downloaded JQuery, specifically the JQuery UI “Sortable” functions. Like I said, the main dropdown is now a pseudo-listbox, i.e. a ul with restricted height and overflow:auto. Each item has five radio buttons next to it, which are hidden with Javascript. (That is, if Javascript isn’t available, the user just sees a list with radio buttons.) When you drag items from the main list into the (script-generated) category lists, the appropriate radio button is marked. There will also be some code that runs on page load to move already-marked options from the main list to the appropriate category (i.e. for editing capability).