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;
}