Listbox Elements manipulation [Move Up and Down]

Here i want to share about how to move items in list box by up and down direction.

Setp 1:

Create one script library as java script and add the following function

function move(item,direction)

{

var listbox = item;

var direction=direction;

var selIndex = listbox.selectedIndex;

if(-1 == selIndex) {

alert(”Please select an option to move.”);

return;

}

var increment = -1;

if(direction == ‘up’)

increment = -1;

else

increment = 1;

if((selIndex + increment) < 0 ||

(selIndex + increment) > (listbox.options.length-1)) {

return;

}

var selValue = listbox.options[selIndex].value;

var selText = listbox.options[selIndex].text;

listbox.options[selIndex].value = listbox.options[selIndex + increment].value

listbox.options[selIndex].text = listbox.options[selIndex + increment].text

listbox.options[selIndex + increment].value = selValue;

listbox.options[selIndex + increment].text = selText;

listbox.selectedIndex = selIndex + increment;

}

step 2:

Create new xpage ->Select Page->Properties-> In resource, add the java script.

Step 3:

Then place one list box and add some values and two buttons and call this function as

In Up button,

var listbox = document.getElementById(”#{id:list}”);

var direction=”up”;

move(listbox,direction);

In Down Button,

var listbox = document.getElementById(”#{id:list}”);

var direction=”down”;

move(listbox,direction);

Step 3:

Then preview this xpage and show the result.