how to copy a Select input and append it to a div in Jquery

Question

hello

i have a Select input and it's name is "item" for example

<select name="item">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

i want to add a button that will copy this Select and removed Selected value if any and then append that copy to an a div called "all items".

how can i do that in Jquery? thanks

Answer 1

Give your select an id.

$('#button').click(function(){
       $('div#id').append($('#id option:selected').val()); //Append.
       $('#id option:selected').remove(); //Remove selected item.
    }

Answer 2

Demo Online: http://jsbin.com/awuzo/edit

From what I understand, you want to remove what is selected, and then transfer the select element itself to a new location?

$(function(){
  // when we click our button
  $("#clickme").click(function(){
    // Move our SELECT and remove Selection value(s)
    $(":input[name='item']")
      .appendTo("#allitems")
      .children(":selected").remove(); 
  }); 
});

Answer 3

i want to add a button that will copy this Select and removed Selected value if any and then append that copy to an a div called "all items".

$('#button').click(function(){
   var copy = $('select[name=item]').clone();
   copy.children(':selected').removeAttr('selected'); // just unselect....
   // copy.children(':selected').remove() // if you want to remove the element...
   $('#div_all_items').append(copy); //Append.
})