Flytte options og optgroups mellem select bokse

Hej Eksperter

På min hjemmeside http://mange-gode-opskrifter.dk mangler jeg noget javascript der kan gøre det let for brugeren at finde opskrifter.

Jeg forestiller mig noget i den her stil:
http://www.mattkruse.com/javascript/optiontransfer/

Hvor det så er ingredienser der skal flyttes. For at gøre det let for vegetarer, og f.eks. mælkeallergikere, vil jeg gerne kunne gruppere ingredienserne sådan at der f.eks. står

<form onsubmit="return false;">
    <div style="width: 200px;">
    <select multiple="multiple" style="float: right; height: 200px;">
   
    </select>
   
    <select multiple="multiple" style="height: 100px;">
        <optgroup label="Mælkeprodukter">
<option>Mælk</option>
<option>Yoghurt</option>
<option>Ost</option>
</optgroup>
        <optgroup label="Frugt">
<option>Æbler</option>
<option>Appelsiner</option>
<option>Pærer</option>
</optgroup>
    </select><br />
    <select multiple="multiple">
        <option>Mælkeprodukter</option>
        <option>Frugt</option>
    </select>
    </div>
    </form>

Som man kan se forestiller jeg mig, at man kan flytte hele grupper via den select box, der indeholder grupperne. Min problemstilling består i, at hvis man manuelt flytter alle elementer fra én gruppe, så skal gruppen forsvinde (men komme frem igen så snart man rykker en ingrediens tilbage som tilhører den gruppe).

Hvis det er nemmere kan jeg også klare en løsning, hvor der er to selectboxe, en med ingredienser og en med grupper, men hvor man ikke se grupperingen i ingredienslisten.

Håber der er en der kan få mig på rette spor.