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>
<br />
<br />
<input type="button" id="btnClone" value="Clone" />
<hr />
<div id="container">
<script type="text/javascript" src=""></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("<br /><br />");
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.