I have a script that I want to write, but I'm not sure how to start, so I'm hoping for someone to point me in the right direction.

I'm dealing with a very large form full of very large <select> boxes. (Some select boxes have as many as 30,000 options.) It's all database-driven and is already completed. I'm only working on improving the appearance and usability of the front end.

I've used Javascript to show only portions of the form at a time. Since the user can neither see the entire form at one time, nor can the user (obviously!) see the entirety of each <select> element at one time, I want to dynamically create a <dl> that will populate with the label of the select box (<dt>) and the textnode of the option element (<dd>), onChange of the select boxes. That way the user could quickly and easily see what was selected. (They are basically using the form to create and submit a search query.)

I managed to write a small script to make it work with one select box with multiple disabled, but from there it's a big step to 20 or 30 select boxes, each with multiple enabled.

I'm thinking along the lines of getElementsByTagName("select"), then looping through to create an array of the selectedIndex for each select box, then using those values to create the nodes of the <dl>. But I'm not exactly sure how to make it work, and I'm not at all sure how to remove the nodes from the <dl> if they de-select an option.

Can anyone offer any suggestions?

Thanks!

It sounds like you've got it almost there. A node has several methods that can be called to manipulate child nodes. To remove a child call you would do something like this: parentNode.removeChild(childNode);

Here are some references that you will find useful:
http://www.w3.org/TR/REC-DOM-Level-1...#ID-1950641247
http://developer.mozilla.org/en/docs...DOM_Interfaces
http://www.javascriptkit.com/jsref/document.shtml
http://developer.mozilla.org/en/docs..._1.5_Reference