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>