Why clone()? Why not just move them from one to the other? (ids changed for simpler coding...) <select id="left" multiple="multiple"> <option value="1">test 1</option> <option value="2">test 2</option> <option value="3">test 3</option> </select> <button id="left_right">>></button> <button id="right_left"><<</button> <select id="right" multiple="multiple"> </select>
$('button').each(function(){ var lr = this.id.split('_'); $(this).click(function(){ $('#' + lr[0] + ' option:selected').appendTo('#' + lr[1]); }); }); On Oct 23, 6:16 pm, Korijn <[EMAIL PROTECTED]> wrote: > The problem I have is (I think) quite simple but I find myself unable > to find a solution to it. > In the system I made you can select options from a select box and then > click a button to add them to a different select box with your > selected options. There's also a button to remove items from your > selection. This works fine and you can see it below. > > What I need is something added to the first selector that will make > sure of the following: > If an option has already been added to #selection it should not be > added again! But how can I accomplish that? > Thanks in advance! > > Here's the (stripped) situation: > > <script type="text/javascript"> > //<![CDATA[ > $(document).ready(function() { > $("#right").click(function() { > $("#options option:selected").clone().appendTo("#selection"); > return(false); > }); > $("#left").click(function() { > $("#selection option:selected").remove(); > return(false); > });}); > > //]]> > </script> > > <select id="options" multiple="multiple"> > <option value="1">test 1</option> > <option value="2">test 2</option> > <option value="3">test 3</option> > </select> > > <button id="right">>></button> > <button id="left"><<</button> > > <select id="selection" multiple="multiple"> > </select>