CODEWITHSUNDEEP
javascriptjqueryhtml
user3211646
user3211646

Reputation: 17

Copy and Remove textarea1 to another textarea2. working already

code already working tnx to @Maurice Perry and others. html and jquery Function (copy and remove text from dropdownlist and move to another textarea)

      <html>
      <head>
      <title> Example</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">                      </script>  
      <script>
     $(function(){
     $("#copy").on("click", function(){
     $("#textarea option:selected").each(function(){
     $("#textarea2").append($(this).clone());
     $(this).remove();
        });  
     });   
      $("#remove").on("click", function(){
      $("#textarea2 option:selected").each(function(){
      $("#textarea").append($(this).clone());
      $(this).remove();
          });  
         });  
       });
     </script>
     <body>

    <select multiple="multiple" class="options" id="textarea">
     <option value="item1">Item 1</option>
     <option value="item2">Item 2</option>
     <option value="item3">Item 3</option>
     <option value="item4">Item 4</option>
     <option value="item5">Item 5</option>
    </select>

     <button id="copy">Copy</button>
     <button id="remove">Remove</button>

     <select id="textarea2" multiple class="remove">
     </select>
     </body>
     </html>

Upvotes: 2

Views: 173

Answers (3)

Maurice Perry
Maurice Perry

Reputation: 32831

Or this?

$(function(){
    $("#copy").on("click", function(){
        $("#textarea option:selected").each(function(){
            $("#textarea2").append($(this).clone());
            $(this).remove();
        });  
    });   
    $("#remove").on("click", function(){
        $("#textarea2 option:selected").each(function(){
            $("#textarea").append($(this).clone());
            $(this).remove();
        });  
    });  
});

http://jsfiddle.net/robbyn/3BN6v/

EDIT

Import jquery in your page:

  <html>
  <head>
  <title> Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  ...

Upvotes: 1

Daniil Grankin
Daniil Grankin

Reputation: 3933

You have fogot to add jquery to your page 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

For removing use this

$("#remove").on("click", function(){
              $("#textarea option:selected").each(function(){ 
                   $(this).remove();
             });  
         });

Upvotes: 0

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Try this:

$("#copy").on("click", function()
{    
    $("#textarea2").append($("#textarea option:selected").clone());
});

$("#remove").on("click", function(){
    $("#textarea2").append($("#textarea option:selected"));
});

Those should provide a copy and a move functionality.

http://jsfiddle.net/hescano/3qyMJ/1/

Upvotes: 0

Related Questions