SwapBox is a JavaScript widget that I created several years ago to make those cumbersome multiple-select HTML form elements easier to use, not to mention a little bit more handsome and a lotta-bit cooler. The original version was built to use Internet Explorer’s “expanded†DOM, with little support for any other browser. (I justify this by pointing out that it was developed to be used on a corporate Intranet where 99.9% of the users were running Internet Explorer on corporate imaged PC’s) I’ve since found another need for such a script so I decided to updated it to reflect my new found respect for XHTML and alternate browsers.
This widget is used to transform a normal multiple-select element into a pair of “swap boxes†which allow a user to move options back and forth between a “selected†and “available†bin. I’ve found it to be easier to use than a normal multiple-select box for users with very low technical skills as it visually separates the selected items from the rest. It will only render if the browser supports the DOM calls that are required, otherwise the original select box is left as is. If it is rendered it retains the original select box to submit the data in the “selected†bin so you need not change anything on the back end of your form processing pages. In fact, the only change required on the front end is to insert the relevant JavaScript and CSS into the header of your document and modify up to 4 JavaScript variables according to your preferences. It currently only works on a single select box per page, but it could be easily updated to handle multiple swap boxes. Give it a spin if you have a second and let me know what you think. The code is provided free of charge for non-commercial use with the stipulation that you leave all comments intact. Please get in touch for commercial licensing information.
Here is a link to an example page. Use your browser’s “view source†option to view the code in its entirety.
* This post was originally published on January 10, 2005 at http://www.csb7.com/whyblogwhy/index.php/2005/01/10/swapbox-20-a-javascript-widget/