Moving options between two select box lists, with optgroups

[madflytom]

Hello,

I'm trying to move the options of one select list to another select list. The "source" select list is divided into optgroups, and the "target" select list is not. I want to somehow keep track of the moved option's optgroup, so that if I remove it from the "target" select list, it moves back into it's respective optgroup in the "source" select list.

I have things moving back and forth, but I'm not sure how to handle the optgroup tracking. Here's basically what I have:
[CODE=javascript]
<script language="JavaS cript" type="text/javascript">
function MoveOption(objS ourceElement, objTargetElemen t)
{
var aryTempSourceOp tions = new Array();
var x = 0;

//looping through source element to find selected options
for (var i = 0; i < objSourceElemen t.length; i++) {
if (objSourceEleme nt.options[i].selected) {
//need to move this option to target element
var intTargetLen = objTargetElemen t.length++;
objTargetElemen t.options[intTargetLen].text = objSourceElemen t.options[i].text;
objTargetElemen t.options[intTargetLen].value = objSourceElemen t.options[i].value;
}
else {
//storing options that stay to recreate select element
var objTempValues = new Object();
objTempValues.t ext = objSourceElemen t.options[i].text;
objTempValues.v alue = objSourceElemen t.options[i].value;
aryTempSourceOp tions[x] = objTempValues;
x++;
}
}

//resetting length of source
objSourceElemen t.length = aryTempSourceOp tions.length;
//looping through temp array to recreate source select element
for (var i = 0; i < aryTempSourceOp tions.length; i++) {
objSourceElemen t.options[i].text = aryTempSourceOp tions[i].text;
objSourceElemen t.options[i].value = aryTempSourceOp tions[i].value;
objSourceElemen t.options[i].selected = false;
}
}
[/CODE]
and the body:
[CODE=html]
<table><tr><t d>
<select name="Enabled1" id="Enabled1" size="20" multiple
style="width: 300px;">
<optgroup label="Option Group 1">
<option value="Value1"> Option1</option>
<option value="Value2"> Option2</option>
</optgroup>
</select>
</td><td>
<input type="button" name="add" value="&nbsp;&n bsp;&nbsp; add -&gt; " style="width: 100px;"
onclick="MoveOp tion(this.form. Enabled1, this.form.Disab led1)"><br />
<input type="button" name="remove" value=" &lt;- remove &nbsp;&nbsp;&nb sp;" style="width: 100px;"
onclick="MoveOp tion(this.form. Disabled1, this.form.Enabl ed1.)">
</td>
<td>
<select name="Disabled1 " id="Disabled1" size="20" multiple style="width: 300px;">
</select>
</td></tr></table>
[/CODE]

Thanks!

[pbmods]

Heya, Tom.

Here's how I do it:
[code=javascript]
.
/**
*
* selSwap()
*
* Swaps sets of recipients between two SELECTs.
*
* @param string $from Move OPTIONs from the SELECT with this id...
* @param string $to ...to the SELECT with this id.
*
* @return void
*
* @since Tuesday, July 24, 2007
*/
function selSwap($from, $to)
{
$from = document.getEle mentById($from) ;
$to = document.getEle mentById($to);

for( var $i = 0; $i < $from.options.l ength; ++$i )
{
if( $from.options[$i].selected )
{
$from.options[$i].selected = false;
$to.appendChild ($from.removeCh ild($from.optio ns[$i]));
--$i;
}
}
}
[/code]

This code moves selected options in between select elements, which sounds similar to what you're trying to accomplish.

Note this line:
[code=javascript]
$to.appendChild ($from.removeCh ild($from.optio ns[$i]));
[/code]

Element::remove Child() removes the node from its parent and returns it. In this case, it immediately gets passed to Element::append Child(), which adds it to the other element.