An alternative ... var tgt = $('select:not(.addFrom)'); $('#right').click(function(){ var x = $(tgt).children(); $('.addFrom option:selected').filter(function(){ // remove, by value, selected options already in target... return (x.filter('[value="'+this.value+'"]').length==0); }).clone().appendTo(tgt).end(/*clone*/).end(/*filter*/) // all selected are processed so de-select... .each(function(){ this.selected = false; }); return false; }); $('#left').click(function(){ $('option:selected', tgt).remove(); return false; });
<select class='addFrom' multiple="multiple"> <option value="1">test 1</option> <option value="2">test 2</option> <option value="3">test 3</option> </select> <select class='addFrom' multiple="multiple"> <option value="4">test 4</option> <option value="5">test 5</option> <option value="6">test 6</option> </select> <select class='addFrom' multiple="multiple"> <option value="A">test A</option> <option value="B">test B</option> </select> <button id='right'>>></button> <button id='left'><<</button> <select multiple="multiple"> </select> On Oct 24, 11:07 am, Korijn <[EMAIL PROTECTED]> wrote: > And what would I do in this case? Having multiple selectboxes to > choose items from? > > I'm not sure if using prefixes in the valuables is a good idea to keep > track of what item came from what selectbox but it's all I can come up > with right now. > > <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> > > <div id="options"> > <select id="options1" multiple="multiple"> > <option value="options1;1">test 1</option> > <option value="options1;2">test 2</option> > <option value="options1;3">test 3</option> > </select> > > <select id="options2" multiple="multiple"> > <option value="options2;1">test 1</option> > <option value="options2;2">test 2</option> > <option value="options2;3">test 3</option> > </select> > </div> > > <button id="right">>></button> > <button id="left"><<</button> > > <select id="selection" multiple="multiple"> > </select>