Professional JavaScript For Web Developers

Forms and Data Integrity
This method removes all options by iterating in reverse order. This is necessary because every time an
option is removed, the index property of each option is reset to the proper position. For this reason, it is
always best to remove the option with the highest index first and work your way back to the option with
the lowest index. Otherwise, you must keep track of multiple changing indexes.
Moving Options
In early JavaScript, moving options from one list box to another was a rather arduous process that
involved removing the option from the first list box, creating a new option with the same name and value,
then adding that new option to the second list box. Fortunately, the DOM provides a much more concise
way of doing things. Using DOM methods, it’s possible to literally move an option from the first list box
into the second list box by using the appendChild() method. If you pass an element that is already in the
document into this method, the element is removed from its parent and put into the position specified.
The method to execute this functionality accepts three arguments: the list box that the option currently
resides in, the list box to move the option to, and the index of the option to move. The method can then
take the option in the given index (assuming it exists) and move it to the second list box:
ListUtil.move = function (oListboxFrom, oListboxTo, iIndex) {
var oOption = oListboxFrom.options[iIndex];
}
if (oOption != null) {
oListboxTo.appendChild(oOption);
}
It is then possible to move a given option from one list box to another by using code such as the
following:
var oListbox1 = document.getElementById(“selListbox1”);
var oListbox2 = document.getElementById(“selListbox2”);
ListUtil.move(oListbox1, oListbox2, 0); //move the first option
This code moves the first option from oListbox1 into oListbox2 (the new option appears at the
bottom of oListbox2).
Moving options is the same as removing them in that the index property of each
option is reset into the proper position, so you should always move the option with
the highest index first.
Reordering options
To reorder options in a list box, moving a particular option either up or down, two methods are necessary,
one to shift an option up and one to shift an option down. Each method takes two arguments: the
list box to act on and the index of the option to move. Both also make use of the DOM insertBefore()
method to reorder the elements.
361