Post
Ask Question
sagar sathwara

sagar sathwara

  • NA
  • 22
  • 1.2k

i want to move listbox selected item to another listbox.

Nov 11 2013 12:36 AM
Hi sir,

I want to move listbox selected item to another listbox with its associated optgroup.

eg:
Category1
cat1
cat2
cat3
Category2
ct1
ct2

suppose i select cat1 of Category1, so cat1 is moved into another listbox with optgroup Category1, after i am select cat2 so it will append after cat1 of Category1, like this all..

Thank You..


I am using this code,,it is running good,but selected item of listbox is moved with its optgroup each time when i m moving item of listbox1..


code:
<html>
<head>
<script type="text/javascript">
function selectItems(fromID,toID)
{
var from = document.getElementById(fromID);
var to = document.getElementById(toID);
if(from.selectedIndex == -1)
{
return (false);
}
for(var i=0; i < from.options.length; i++)
{
var o=from.options[i];
if(o.selected)
{
if(to.selectedIndex == -1)
{
var index=0;
}
else
{
var index=to.options.length;
}
// create new option group
sel=document.getElementById('lstboxItems');
var idx=document.getElementById('lstboxItems').selectedIndex;
var oGroup = document.createElement('OPTGROUP');
oGroup.label =sel.options[idx].parentNode.label;
to.appendChild(oGroup);
for(var i=0;i<from.options.length;i++)
{
if(from.options[i].selected)
{
var pid=from.options[i].parentNode.label;
to.options[to.options.length]= new Option(from[i].text,from[i].value);
}
}
// to.options[to.options.length]= new Option(o.text,o.value);
}
}
for(var i=(from.options.length-1); i >= 0; i--)
{
var o=from.options[i];
if(o.selected)
{
from.options[i]=null;
}
}
from.selectedIndex=-1;
to.selectedIndex=-1;
}
</script>
</head>
<body>
<hr />
<fieldset>
<legend>List Task</legend>
<form name="combo_box">
<table border="1">
<tr>
<td><select name="lstboxItems" id="lstboxItems" multiple size="10" onClick="find(this.value,this.selectedIndex)">
<optgroup label='DML'><option>Insert</option><option>Delete</option><option>Edit</option><option>Select</option><optgroup label='Server Side'><option>ASP.NET</option><option>PHP</option><optgroup label='Web'></optgroup> </select></td>
<td align="center" valign="middle"><input type="button" name="button" onClick="selectItems('lstboxItems','lstboxSelectedItems',this.value,this.selectedIndex);" value="Go"/>
<br /></td>
<td><select name="lstboxSelectedItems" id="lstboxSelectedItems" multiple size="10">
</select></td>
</tr>
</table>
</form>
<hr />
</fieldset>
</body>
</html>