How To Move Items Between Lists with JavaScript-3 : Page 3

Start the Script
As you can see from the HTML, you'll need to implement a few methods in the script. Create a new file in your text editor and start by entering the following JavaScript:

var selectedList;
var availableList;
function createListObjects(){
    availableList = document.getElementById("availableOptions");
    selectedList = document.getElementById("selectedOptions");
}

I've set up two global object variables in the createListObjects() method—one 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.

function delAttribute(){
   var selIndex = selectedList.selectedIndex;
   if(selIndex < 0)
      return;
   availableList.appendChild(
      selectedList.options.item(selIndex))
   selectNone(selectedList,availableList);
   setSize(availableList,selectedList);
}
function addAttribute(){
   var addIndex = availableList.selectedIndex;
   if(addIndex < 0)
      return;
   selectedList.appendChild( 
      availableList.options.item(addIndex));
   selectNone(selectedList,availableList);
   setSize(selectedList,availableList);
}

The delAttribute() and addAttribute() 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() is passed by reference rather than by value. That is, the code passes the Node object itself to the method—not a copy of the Node's value. So, when you change the Node object, the DOM reflects those changes immediately. In fact, JavaScript—by default—passes all objects by reference. In contrast, JavaScript passes primitives (such as integers and strings) by value. Consider the following two functions:

function setTop(top){
	document.getElementById
      ('someLayer').style.top = top;
}
function setLayerTop(lyr,top){
	lyr.style.top = top;
}

Both the functions shown above take a "top" argument—a 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 object—and not forgotten the next time the property is accessed. Changing the object in the function changes the object permanently.

Previous Page

Next Page