как сделать клон выпадающего списка с данными, связанными с ним?

Question

У меня есть div, который содержит выпадающий список с привязанными к нему данными, а также тип ввода даты input и текстовое поле. Я хочу сделать клон div с новым idclone, тип ввода даты, текстовое поле и раскрывающийся список и связанные данные для клонирования выпадающего списка. Как я могу это сделать?

Я использую нижеследующий код, который клонирует его, изменяя идентификатор div, но не его дочерние элементы, и клонированный тип выбора даты ввода текста отключается.

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>

Answer 1

Вот механизм клон, клонирование события, а также http://jsfiddle.net/dg30gj27/.

Примечания, вы используете ASP-тег в вашем примере, вы должны использовать HTML-тег в вашем примере, как: http://code.runnable.com/UjB_wxmQpvw8AAAw/asp-net-how-to-use-dropdownlist мышей на бег и проверить получившийся Html.

Этот метод, представленный здесь, клонирует все клиентские события, у вас могут возникнуть проблемы с обработкой событий по коду, вам нужно проверить источник событий, чтобы выполнить правильное действие на сервере.

// 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");