how to make clone of dropdown with data bound it too?

Question

I have a div which contains a a dropdown with data bound to it and an input type text datepicker and a textbox. I want to make a clone of the div with a new id of clone, input type date picker, textbox and dropdownlist and bound data to cloned dropdown. How can I do this?

I'm using the below code it cloning it changing the id of div but not its child elements and the cloned input type text date picker gets disabled.

var toAddCloneCount = 0;
        
function AddDestination() {
    var clone = $("#toAdd").clone(true);
    clone.show();
    clone.attr('id', 'toAdd' + toAddCloneCount++).insertAfter("#toAdd");
    clone.find("#days").attr('id', 'days' + toAddCloneCount);
    clone.appendTo("#destinations");
}

<div id="destinations">
    <div id="toAdd">
        <table style="width: 100%;">
            <tr>
                <td class="auto-style8">To </td>
                <td>
                    <asp:DropDownList ID="dropDownList2" runat="server" onchange="CheckCity()" DataValueField="CityId" DataTextField="CityName" Height="100%" Width="95%"></asp:DropDownList>
                </td>
                <td>Days to Stay</td>
                <td>
                    <asp:TextBox ID="days" Width="30%" Height="100%"  onkeypress="return false" onKeyDown="return false" TextMode="Number" Min="1"  runat="server" Text="1"></asp:TextBox>
                </td>
                <td>
                    <p>
                        Date: 
                        <input type="text" class="getCurrentDate"  id="toDate" onkeypress="return false" onkeydown="return false" />
                    </p>
                </td>
                <td>
                    <asp:LinkButton ID="LinkButton2" OnClientClick="AddDestination(); return false;" CssClass="divshow" runat="server">+Add</asp:LinkButton>
                </td>
            </tr>
        </table>
    </div>
</div>

stackoverflow.com/questions/8247724/… This question has been asked before. — Altay Mazlum

SilentTremor SilentTremor · Accepted Answer · 2015-07-03T09:25:20

Here is a clone mechanism, cloning events as well http://jsfiddle.net/dg30gj27/.

Note, you are using asp tags in your example, you should use HTML tags in your example as: http://code.runnable.com/UjB_wxmQpvw8AAAw/asp-net-how-to-use-dropdownlist click on run and inspect the resulted Html.

This method presented here clone all client events, you may have problems with events handling on code behind, you need to check event source in order to perform the correct action on server.

// Original element with attached data
var $elem = $( "#destinations" ).data( "arr", [ 1 ] ),
    //withDataAndEvents (default: false) Type: Boolean"
    cloned = $elem.clone( true )
    // Deep copy to prevent data sharing
    .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

cloned.attr("id", cloned.attr("id") + "_cloned");
cloned.find( "*" ).each(function(){
    if ($(this).attr("id") != undefined && $(this).attr("id").length > 0)
    {
        $(this).attr("id", $(this).attr("id") + "_cloned");
    }
});
console.log(cloned);
cloned.prependTo(".wrapper");

how to make clone of dropdown with data bound it too?

1 Answers