This code snippet is to clone or copy a HTML Select DropDown List items on Button click using jQuery. The DropDown List items are cloned along with the Selected Value.
<select name="ddlFruits" id="ddlFruits">
    <option value="0">Please Select</option>
    <option value="1">Mango</option>
    <option value="2">Apple</option>
    <option value="3">Banana</option>
    <option value="4">Orange</option>
</select>
<br />
<br />
<input type="button" id="btnClone" value="Clone" />
<hr />
<div id="container">
</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 () {
        $("#btnClone").bind("click", function () {
 
            var index = $("#container select").length + 1;
 
            //Clone the DropDownList
            var ddl = $("#ddlFruits").clone();
 
            //Set the ID and Name
            ddl.attr("id", "ddlFruits_" + index);
            ddl.attr("name", "ddlFruits_" + index);
 
            //[OPTIONAL] Copy the selected value
            var selectedValue = $("#ddlFruits option:selected").val();
            ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
 
            //Append to the DIV.
            $("#container").append(ddl);
            $("#container").append("<br /><br />");
        });
    });
</script>
 
Explanation
There’s an HTML DropDown (SELECT element) and a Button. To the Button I have assigned a jQuery Click event handler.
When the Button is clicked, the HTML DropDown List items are cloned (copied) and a new HTML DropDown is appended to the HTML DIV.
 
Demo