Question

I have a jquery code below where an option which has been selected from a drop down menu is removed from the drop down menu:

            var selectedOption = jQuery("#modulesDrop option:selected");
            selectedOption.remove();

But before I perform the remove, I want to add the content from the drop down menu into a select box, but the problem is that I don’t seem to know how to do this. I tried the code below but all that did was remove the option from the drop down menu as above and did not add the option into the select box:

        var selectedOption = jQuery("#modulesDrop option:selected");
        selectedOption.appendTo("#moduleExistForm");
        selectedOption.remove();

Answer 1

You don’t need to call remove() because appendTo() automatically detaches the element from its original parent then appends it on the new element that you specify:

<select id="old">
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>

<input type="button" value="add" id="add"/>

<select id="new">
</select>​
<script>
   $('#add').click(function(){
     var x = $('#old option:selected');
     x.appendTo($('#new'))
    });​
</script>

Here’s the fiddle:
http://jsfiddle.net/8MAny/