In this article I will explain how to Clone DropDownList Items i.e. Copy DropDownList Items to another DropDownList using jQuery.
The DropDownList is cloned and its items are copied to another DropDownList along with the Selected Value.
 
HTML Markup
The HTML Markup consists of an ASP.Net DropDownList, a Button to Clone or copy the DropDownList Items, an HTML DIV to hold the Cloned (copied) DropDownLists and another Button to submit the Form and fetch the values of DropDownLists on server side.
<asp:DropDownList ID="ddlFruits" runat="server">
    <asp:ListItem Text="Please Select" Value="0" />
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Orange" Value="4" />
</asp:DropDownList>
<br />
<br />
<asp:Button ID="btnClone" Text="Clone" runat="server" />
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
<hr />
<div id="container">
</div>
 
 
Copy DropDownList items to another DropDownList using jQuery
A jQuery click event handler has been assigned to the Button btnClone. When the Button is clicked the DropDownList items are cloned (copied) and a new DropDownList is appended to the HTML DIV.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
    $("[id*=btnClone]").bind("click", function () {
 
        var index = $("#container select").length + 1;
 
        //Clone the DropDownList
        var ddl = $("[id$=ddlFruits]").clone();
 
        //Set the ID and Name
        ddl.attr("id", "ddlFruits_" + index);
        ddl.attr("name", "ddlFruits_" + index);
 
        //[OPTIONAL] Copy the selected value
        var selectedValue = $("[id$=ddlFruits] option:selected").val();
        ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
 
        //Append to the DIV.
        $("#container").append(ddl);
        $("#container").append("<br /><br />");
 
        return false;
    });
});
</script>
 
 
Fetching the value Server Side
On the server side, using the Request.Form collection we can easily get the selected values of the DropDownLists that are cloned or copied.
C#
protected void Submit(object sender, EventArgs e)
{
    string value1 = Request.Form["ddlFruits_1"];
    string value2 = Request.Form["ddlFruits_2"];
    string value3 = Request.Form["ddlFruits_3"];
    //And same way you can get values of Nth Cloned DropDownList
}
 
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
    Dim value1 As String = Request.Form("ddlFruits_1")
    Dim value2 As String = Request.Form("ddlFruits_2")
    Dim value3 As String = Request.Form("ddlFruits_3")
    'And same way you can get values of Nth Cloned DropDownList
End Sub
 
Clone DropDownList Items ASP.Net: Copy DropDownList items to another DropDownList using jQuery
 
Demo
View Demo
 
Downloads
Download Code