Browse DevX
Sign up for e-mail newsletters from DevX


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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Finish the Script
Now that you've seen the power of passing objects to functions, add the following setSize() and selectNone() functions to the script (note that both functions take object arguments).

function setSize(list1,list2){ list1.size = getSize(list1); list2.size = getSize(list2); } function selectNone(list1,list2){ list1.selectedIndex = -1; list2.selectedIndex = -1; addIndex = -1; selIndex = -1; }

The setSize() function makes use of getSize(), which also takes objects as parameters.

function getSize(list){ /* Mozilla ignores whitespace, IE doesn't - count the elements in the list */ var len = list.childNodes.length; var nsLen = 0; //nodeType returns 1 for elements for(i=0; i<len; i++){ if(list.childNodes.item(i).nodeType==1) nsLen++; } if(nsLen<2) return 2; else return nsLen; }

Note that Mozilla and IE count nodes differently. Mozilla counts only the <option> elements contained within the list. IE counts the white space as nodes as well. The getSize() function works around this by counting only the elements contained within the list (nodeType==1). In my opinion, Mozilla does it correctly—it ignores the white space. Also note that I've set the minimum size to 2. This allows me to avoid displaying either list as a drop down. Next, implement the mechanism that lets users move an entire list from one side to the other. Add the following to the script:

function delAll(){ var len = selectedList.length -1; for(i=len; i>=0; i--){ availableList.appendChild(selectedList.item(i)); } selectNone(selectedList,availableList); setSize(selectedList,availableList); } function addAll(){ var len = availableList.length -1; for(i=len; i>=0; i--){ selectedList.appendChild(availableList.item(i)); } selectNone(selectedList,availableList); setSize(selectedList,availableList); }

The only thing noteworthy about the delAll() and addAll() methods is that they both loop through the nodes from last to first. This approach avoids losing the reference to later nodes in the list. If the code looped from first to last instead, removing item(0) during each iteration, then after the first iteration, item(1) would have become item(0) and—would have been skipped—because the second time through the loop, the counter variable i equals 1. Therefore, the forward version would (inadvertently) skip nodes The last function implemented is showSelected(). It loops through the user-selected options and displays the values. This function is largely superfluous and merely serves to demonstrate that the selected options have, in fact, been moved. In the real world, you'd just submit the user-selected options to your form handler as usual.

function showSelected(){ var optionList = document.getElementById ("selectedOptions").options; var data = ''; var len = optionList.length; for(i=0; i0) data += ','; data += optionList.item(i).value; } alert(data); }

I hope this exposure to the power of passing objects to functions helps to demonstrate JavaScript's inherent capabilities. I also hope that you see not only how this solution demonstrates list manipulation, but also that it illustrates the value of standards compliance. Standards compliance lets you, the developer, concentrate on what your application doesnot how it does it. As the major browser manufacturers implement more of the DOM and CSS standards in their products and users upgrade to the latest versions, scripting will become increasingly productive.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the college's in-house Web design studio. You can reach him via e-mail .
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date