Start the Script
availableList = document.getElementById("availableOptions");
selectedList = document.getElementById("selectedOptions");
I've set up two global object variables in the createListObjects()
methodone for the available options and one for the user-selected options. The code calls the createListObjects()
method from the onLoad event of the body tag so that you can later access the properties and methods of the objects anywhere in the script.
Next, add the methods that move a single option between the lists.
var selIndex = selectedList.selectedIndex;
if(selIndex < 0)
var addIndex = availableList.selectedIndex;
if(addIndex < 0)
methods are nearly identical. First, the script checks whether the user has selected an option from the source list. If no option is selected, the methods do nothing, they just return. Next, the code calls the appendChild()
method on the target list, passing the item selected. Finally the code calls two helper methods named selectNone()
, which resets the UI, removing any current selections, and setSize()
, which resizes both list boxes to eliminate scrolling.
Note that it appears that the code removes nothing from either list. The appendChild()
method takes a Node object as an argument. Each Node object can have only a single parent reference; appendChild()
changes the parent reference of the Node argument by adding it to the target list. Changing the parent means the reference to the node's previous parent is lost, but because a Node object can have only a single parent, changing the parent has the additional effect of removing the node from the original list.
The Node object passed to appendChild()
('someLayer').style.top = top;
lyr.style.top = top;
Both the functions shown above take a "top" argumenta number that will be assigned to the top property of some layer. Both functions add the number and then forget it immediately. The number represents a value, not an object. However, setLayerTop
adds an object argument. The lyr
argument is a pointer to an object. When you set the lyr
object's top property, it is stored in the objectand not forgotten the next time the property is accessed. Changing the object in the function changes the object permanently.