编写 jQuery 代码，我必须在单击按钮时克隆 div。新 div 应该有全新的下拉列表

Question

JQUERY:

 $("#panel_moreInfoDetails_common3").clone().appendTo("#panel_moreInfoDetails_common2");

我可以克隆 div，但我需要其中的下拉列表。请注意，我的下拉选项在 foreach 循环中。 HTML 下面给出 HTML:

<div class="row" id="panel_moreInfoDetails_common3">
     <div class="delete-moreinfodetails" style="margin-left: 15px;margin-top: 20px;margin-right: 18px;">
         <a data-id="@record.UserFieldIndexNumber" id="button-delete-moreinfodetails" href="javascript:void(0)">
            <i class='icon icon-bin3'></i>
         </a>
     </div>
     <div id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" class="col settings-field @(fields.Contains(string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)) ? "hidden" : "")">
        <select class="moreinfo-details" id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" name="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" data-field="Info Details">
             <option value="">Select an option</option>
             @foreach (var item in Model.MoreInfoDetailsValues)
             {
                   //selected = record.UserDefinedDropDownField == item.UserDefinedDropDownField ? "selected='selected'" : "";
                   <option data-desc="@item.UserDefinedDropDownField" @selected value="@item.UserDefinedDropDownField">@item.UserDefinedDropDownField</option>
             }
        </select>
     </div>
     <div id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" class="col settings-field @(fields.Contains(string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)) ? "hidden" : "")">

          <input data-ufindex="@record.UserFieldIndexNumber" type="text" class="form-control" value="@record.UserFieldValue" />

     </div>
</div>

Answer 1

jsfiddle here

jQuery Documentation

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

deepWithDataAndEvents (default: value of withDataAndEvents)

A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

您要找的是.clone(true, true)

$("#panel_moreInfoDetails_common3").clone(true, true).appendTo("#panel_moreInfoDetails_common2");

编写 jQuery 代码，我必须在单击按钮时克隆 div。新 div 应该有全新的下拉列表

write a jQuery code, where I have to clone a div on button click. New div should have fresh new dropdown list

asp.net-mvc

jquery

drop-down-menu

jquery-clone