Wednesday, February 4, 2009

Navigation of elements for listboxes in javascript

I happened to implement a simple navigation functionality between two listboxes in my web page. Controlling navigations is best done with the help of javascript. I am posting this with the assumption that, this is one among the commonly used functionality.

Lets step into the intrinsic details now. Consider the following image,
The idea is to control the navigations between source and target listboxes and ordering of elements in the target listbox. We can achieve this with simple javascript functions,






function addItem(sourceListBox,targetListBox,delimiter)
{
var source=document.getElementById(sourceListBox);
var destination=document.getElementById(targetListBox);
for(i=0; i<source.options.length;i++)
{
if(source.options[i].selected==true)
{
var o = document.createElement("option");
destination.options.add(o);
o.text = source.options[i].text;
o.value = source.options[i].value;
}
}
}


function deleteItem(templateList)
{
var listbox=document.getElementById(templateList);
var t=0;
for(i=0; i<listbox.options.length;i++)
{
if(listbox.options[i].selected==true)
{
listbox.remove(i);
}
}
}

function moveUp(templateList)
{
var listbox=document.getElementById(templateList);
vart=0;
for(i=0; i<listbox.options.length;i++)
{
if(listbox.options[i].selected==true)
{
previousItemText = listbox.options[i-1].text;
previousItemValue = listbox.options[i-1].value;
listbox.options[i-1].text=listbox.options[i].text;
listbox.options[i-1].value=listbox.options[i].value;
listbox.options[i].text=previousItemText;
listbox.options[i].value=previousItemValue;
listbox.options[i].selected=true;
t=i;
}
}
listbox.options[t-1].selected=true;
}


function moveDown(templateList)
{
var listbox=document.getElementById(templateList);
var t=0;
for(i=0; i<listbox.options.length;i++)
{
if(listbox.options[i].selected==true)
{
nextItemText = listbox.options[i+1].text;
nextItemValue = listbox.options[i+1].value;
listbox.options[i+1].text=listbox.options[i].text;
listbox.options[i+1].value=listbox.options[i].value;
listbox.options[i].text=nextItemText;
listbox.options[i].value=nextItemValue;
t=i;
}
}
listbox.options[t+1].selected=true;
}