Thanks for help.

Clone ASP.Net DropDownList Items to another using jQuery

I have tried your suggestion using two DropDownList list "master".

The DropDownList cloned child DDL1 is empty.

My code below

<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 ddl1 = $("select[id$=ddl1]").clone();
            var ddl2 = $("select[id$=ddl2]").clone();
 
            //Set the ID and Name
            ddl1.attr("id", "ddl1_" + index);
            ddl1.attr("name", "ddl1_" + index);
 
            ddl2.attr("id", "ddl2_" + index);
            ddl2.attr("name", "ddl2_" + index);
 
            //[OPTIONAL] Copy the selected value
            var selectedValue = $("select[id$=ddl1] option:selected").val();
            ddl1.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
 
            //ddl2.find("option[value = '" + $("[id$=ddl2] option:selected").val() + "']").attr("selected", "selected");
 
            $('#container select').each(function () {
                ddl2.find('option[value="' + $(this).find('option:selected').val() + '"]').remove();
            });
 
            //var selectedValue2 = $("select[id$=ddl2] option:selected").val();
            //ddl2.find("option[value = '" + selectedValue2 + "']").attr("selected", "selected");
 
            //Append to the DIV.
            $("#container").append(ddl1);
            $("#container").append("<br /><br />");
            $("#container").append(ddl2);
 
            return false;
        });
    });
</script>