Copying options and optiongroups with jQuery
<p>I have a found a great jQuery snippet that allows copying of an option from one selector to another and back.</p>

<p>I would like to modify it to add option groups and when all options are moved from one side to another, have the option group removed from empty group and add it to the full group in the new selector.<br>
Can something like that be accomplished with just using jQuery?</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;select multiple id="select1" class="w100p"&gt;                
    &lt;optgroup label="Group 1"&gt;
      &lt;option value="1"&gt;Option 1a&lt;/option&gt;
      &lt;option value="2"&gt;Option 1b&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Group 2"&gt;
      &lt;option value="3"&gt;Option 2a&lt;/option&gt;
      &lt;option value="4"&gt;Option 2b&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;

&lt;a href="#" id="add"&gt;add &gt;&gt;&lt;/a&gt;
&lt;br&gt;
&lt;a href="#" id="remove"&gt;&lt;&lt; remove&lt;/a&gt;

&lt;select multiple id="select2" class="w100p"&gt;&lt;/select&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>$('#add').click(function() {
    return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 option:selected').remove().appendTo('#select1');
});
</code></pre>

<p><a href="http://jsfiddle.net/m97zR/1/" rel="nofollow">DEMO</a></p>
