Move Multiple Items From One List Box To Another List Box (Without Using a List Box) for HTML, CSS and Javascript - from massless.org Requirements: IE 5.5, 6.0 - Netscape 6.2 - Mozilla 0.9.7+
Want to get right to it? I understand...go and play.

Can I use this code? Sure. In fact, please feel free to improve on it. It's a free web. Just View Source, baby. Copying this text and this brief description and pretending that it's your experiment is a no-no, though. No identity-hijacking allowed, thanks.

The story?
Had to do this for work. At first, I was making list boxes from <select> HTML elements. You can see an early (broken) attempt here.

With an increasing amount of data, the UI was becoming less useful for the user. Limitations included:
  1. No easy way to make columns within the list box.
  2. Hard to tell what items were just swapped.
  3. It was difficult for developers to constrain the width of the list box.

Decided to try and take advantage of overflow in CSS2. The "list boxes" are <table> elements that overflow their specified CSS height and width, directing the browser to generate the scroll bars.

A series of javascript functions are included to listen for the CTRL or SHIFT keys and to perform selection behaviors similar to that of an actual <select> element.

What remains to be added: concatenation of the values of each row in the "list box" into hidden form fields and then POST submission.

Compatiblity issues:
This example only works in its entirety on IE 5.5, IE 6.0, Netscape 6.2, and Mozilla 0.9.7+ for Windows. The overflow works for MAC IE 5.0 and 5.1 but there are serious Mac problems, however, that resolve around the event listener. But, I think (hope) they can be fixed.

Currently, the listener doesn't work with MAC IE5 because, among other things, the attachEvent() and addEventListener() methods are not supported. Additionally, it looks like the listener doesn't work for any browser on Mac OS9, because I don't know the keyCode for the Apple key. (Those who want to research how to make an event listener work for all three major event models would do well to start with this article at O'Reilly.) I will keep updating this code until I can get some version working for browsers on the Mac platform. (As well as for Linux which I haven't tested yet.)

-I should've probably just slept instead. -Chris