有什么办法可以在jQuery中克隆sumoselect下拉列表

Question

I am using jquery sumoselect library for showing multiselect dropdown. Now i want to clone this drop down on click of button. Is there any way to achieve this?

$('#chtml').clone().attr('id', 'newid').appendTo('p'); 

I have tried above code where #chtml is the id of td in which my multiselect drop down present and i want to copy this into <p></p> tag.

Answer 1

There seems to be 2 problems with your attempt..

1. The library creates <p> tags, so simply appending to $("p") is literally going to insert the select element into the existing SumoSelect instance.
2. The library hides the original <select> so you're appending an invisible select element anyway. Solve this by calling SumoSelect() on the clone.

PS. There's really no need to give it a new id, just remove the existing one.

 $("#chtml").SumoSelect(); $("#chtml").clone().removeAttr("id").appendTo("#cloneGoesHere").SumoSelect(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.css" rel="stylesheet" /> <select name="somename" id="chtml" tabindex="-1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <p id=cloneGoesHere></p>