Inorder to add options to an optgroup tag dynamically, we need to
1) assign an id to the optgroup say id="firstgrpid"
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)
thats all that needs to be done....!!!
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
var optnew = new Option(currentNode.text, currentNode.value, false);
2)use the setAttribute() to set the "parentid" attribute for the new option tag.
3) add the new option to the destination list tag.
destArray.options[len] = optnew ;
When moving option tags from right-to-left we need to do the above 3 steps and
4) get the value of the "parentid" attribute which contains the parent to which we need to attach the new option tag
5) add the new option tag based on the value of "parentid" attribute.
//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;
when moving elements up or down, we need to
1) get an index of the current selected option
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.
4) interchange the 2 option tags.
//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;
}
full source code
<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>
1) assign an id to the optgroup say id="firstgrpid"
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)
thats all that needs to be done....!!!
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
var optnew = new Option(currentNode.text, currentNode.value, false);
2)use the setAttribute() to set the "parentid" attribute for the new option tag.
3) add the new option to the destination list tag.
destArray.options[len] = optnew ;
When moving option tags from right-to-left we need to do the above 3 steps and
4) get the value of the "parentid" attribute which contains the parent to which we need to attach the new option tag
5) add the new option tag based on the value of "parentid" attribute.
//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;
when moving elements up or down, we need to
1) get an index of the current selected option
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.
4) interchange the 2 option tags.
//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;
}
full source code
<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>
