2) add an attribute to each of the option tags say "parentid" having a value same as the optgroup id (as mentioned in step 1)
when moving elements from left-to-right what needs to be done for each option tag that has been selected from the source list(left hand side list) is
1) create an option tag as shown below with the selected option tags text and value
2)use the setAttribute() to set the "parentid" attribute for the new option tag.
4) get the value of the "parentid" attribute which contains the parent to which we need to attach the new option tag
2) if moving up then increase that index (step 1) by 1 or if moving down then decrease that index (step 1) by 1
3)create 2 new option tags and set the "parentid" attribute.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
//add elements from source to destination and vice-versa
function moveleftright(isAdd)
{
if (isAdd)
{
//source to destination (left to right)
destArray = document.getElementById('destArray');
sourceArray = document.getElementById('sourceArray');
}
else
{
//destination to source (right to left)
sourceArray = document.getElementById('destArray');
destArray = document.getElementById('sourceArray');
}
var myArray=new Array();
var tempCount=0;
var len = destArray.length;
var orgLen = sourceArray.length;
// get a list of all selected elements
for(var i = 0; i < orgLen; i++)
{
if ((sourceArray.options[i] != null) && (sourceArray.options[i].selected))
{
var currentNode = sourceArray.options[i];
var optnew = new Option(currentNode.text, currentNode.value, false);
var tempEleId = "";
for(var j = 0; j < currentNode.attributes.length; j++)
{
if(currentNode.attributes[j].nodeName == "parentid" )
{
optnew.setAttribute(currentNode.attributes[j].nodeName,currentNode.attributes[j].nodeValue);
//store the parent's id in 'tempEleId' so that while removing elements they will be added back to parent.
if(!isAdd && currentNode.attributes[j].nodeName == "parentid")
{
tempEleId = currentNode.attributes[j].nodeValue;
}
}
}
if (isAdd)
{
//add elements at the end
destArray.options[len] = optnew ;
}
else
{
if(tempEleId && tempEleId.length > 0)
{
//get the parent id and add the element to it
tempEle = document.getElementById(tempEleId);
tempEle.appendChild(optnew);
// the below lines of codes are needed for IE otherwise the elements is not displayed in the browser.
optnew.value = currentNode.value;
optnew.text = currentNode.text;
}
}
myArray[tempCount] = currentNode.text;
tempCount++;
len++;
}
}
//Remove the values in from the source list
for (var j=0; j<myArray.length; j++)
{
for (var n=0; n<sourceArray.length; n++)
{
if (myArray[j] == sourceArray.options[n].text && sourceArray.options[n].selected)
{
sourceArray.options[n] = null;
}
}
}
}
//used to interchange the element positions when moving up and down
function swapOptions(obj,i,j)
{
var i_selected ;
var j_selected ;
i_selected = obj[i].selected;
j_selected = obj[j].selected;
//1st element to swap
var temp = new Option(obj[i].text, obj[i].value, obj[i].defaultSelected, obj[i].selected);
var currentNode = obj.options[i];
for(var l = 0; l < currentNode.attributes.length; l++)
{
if(currentNode.attributes[l].nodeName == "parentid")
{
temp.setAttribute(currentNode.attributes[l].nodeName,currentNode.attributes[l].nodeValue);
}
}
var temp2= new Option(obj[j].text, obj[j].value, obj[j].defaultSelected, obj[j].selected);
var currentNode = obj.options[j];
for(var l = 0; l < currentNode.attributes.length; l++)
{
if(currentNode.attributes[l].nodeName == "parentid" )
{
temp2.setAttribute(currentNode.attributes[l].nodeName,currentNode.attributes[l].nodeValue); }
}
obj[i] = temp2;
obj[j] = temp;
obj[i].selected = j_selected;
obj[j].selected = i_selected;
}
/* Move selected option in a select list up one*/
function moveOptionUp(argThis)
{
destArray = document.getElementById('destArray');
for (i=0; i<destArray.options.length; i++)
{
if (destArray.options[i].selected)
{
if (i != 0 && !destArray.options[i-1].selected)
{
swapOptions(destArray,i,i-1);
}
}
}
}
/* Move selected option in a select list down one*/
function moveOptionDown(argThis)
{
destArray = document.getElementById('destArray');
for (i=destArray.options.length-1; i>=0; i--)
{
if (destArray.options[i].selected)
{
if (i != (destArray.options.length-1) && ! destArray.options[i+1].selected)
{
swapOptions(destArray,i,i+1);
}
}
}
}
</script>
</head>
<body>
<form id="createBatchTemplate" name="createBatchTemplate" action="#" method="post">
<div style="padding-bottom:10px;">
<table cellspacing="0">
<colgroup>
<col style="width: 30%" />
<col style="width: 10%" />
<col style="width: 30%" />
<col style="width: 10%" />
</colgroup>
<tbody>
<tr align="left">
<th style="text-align:left; font-siz:60%;margin-bottom:3px"><label>
left columns
</label></th>
<td></td>
<th style="text-align:left; font-siz:60%;margin-bottom:3px"><label>
right columns
</label></th>
<td></td>
</tr>
<tr>
<td><select id="sourceArray" name="sourceArray"
multiple size=10>
<optgroup label='1st group' id="firstgrpid">
<option parentid="firstgrpid" value='grp1element1'/>grp1 element1</option>
<option parentid="firstgrpid" value='grp1element2'/>grp1 element2</option>
<option parentid="firstgrpid" value='grp1element3'/>grp1 element3</option>
<br />
</optgroup>
<optgroup/>
<optgroup label='2nd group' id="secondgrpid">
<option parentid="secondgrpid" value='grp2element1'/>grp2 element1</option>
<option parentid="secondgrpid" value='grp2element2'/>grp2 element2</option>
<br />
</optgroup>
</select></td>
<td align="center" valign="middle"><br />
<br />
<br />
<input type="button" id="addToDest"
onclick="javascript:moveleftright(true);"
value='move right'/>
<br />
<br />
<input type="button"
id="addToSrc"
onclick="javascript:moveleftright(false);"
value='move left'/>
</td>
<td><select id="destArray" name="destArray"
multiple size=10 >
</select></td>
<td align="center" valign="middle"><br />
<br />
<br />
<input type="button"
id="MoveUp"
onclick="javascript:moveOptionUp(this)"
value='move up' />
<br />
<br />
<input type="button" id="MoveDown" onclick="javascript:moveOptionDown(this);"
value='move down' /></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
These tour details are mentioned on blabbermouth.net as well