CODEWITHSUNDEEP
javascriptjquerycssdrop-down-menu
user3154712
user3154712

Reputation:

clone an option of dropdown and name it differently after storing it in the same dropdown

Can we clone an option of dropdown and name it differently after storing it in the same dropdown?

Like I selected an option from the dropdown (eg Apple) after cloning I need to store it as Apple_copy.

  <SELECT NAME="list" ID="list">
      <OPTION>Apple</OPTION>
  </SELECT>   

  <FORM NAME="myform" ACTION="" METHOD="GET">
      <INPUT TYPE="button" NAME="button" VALUE="Copy" onClick="CopyItem1()"/>

JS 

    function CopyItem1() {
        $('#list1').append(function(){
            return $(this).find(':selected').clone(); //return the clone of selected option to be appended.
        });
    }

Upvotes: 1

Views: 102

Answers (3)

LcSalazar
LcSalazar

Reputation: 16841

I agree with parchambault, just remember that the OP needed to rename the option:

var $list = $('#list');             
var clone = $list.find('option:selected').clone();
var name = clone.html() + "_copy";
clone.attr("name", name);
clone.html(name);
$list.append(clone);

Upvotes: 0

Ranjit Singh
Ranjit Singh

Reputation: 3735

Try this 

function CopyItem1()
   {
       var $list=$("#list");
      $list.append($list.find(':selected').clone().attr("name","newName").text("Apple_copy")); //return the clone of selected option to be appended.
   }

Here I am setting name to "newName" and text is changing to "Apple_copy"

You can check the fiddle here

EDIT:

After your comment

function CopyItem1()
   {
       var $list=$("#list");
       var $clone=$list.find(":selected").clone();
       var text=$clone.text(); 
       $list.append($clone.attr("name","newName").text(text +"_copy"));
   }

Now this will append "_copy" if you copy any selected item

Fiddle here

Upvotes: 0

parchambault
parchambault

Reputation: 162

You can only create a clone and append it to the select

function CopyItem1() {
    var $list = $('#list');
    var clone = $list.find('option:selected').clone();

    $list.append(clone);
}

voila!

Upvotes: 1

Related Questions