Question

<div class="target-elements">

@(Html.Kendo().MultiSelect()
      .Name("required")
      .Placeholder("Select attendees...")
      .BindTo(new List<string>() {
          "Steven White",
          "Nancy King",
          "Anne King",
          "Nancy Davolio",
          "Robert Davolio",
          "Michael Leverling",
          "Andrew Callahan",
          "Michael Suyama",
          "Anne King",
          "Laura Peacock",
          "Robert Fuller",
          "Janet White",
          "Nancy Leverling",
          "Robert Buchanan",
          "Andrew Fuller",
          "Anne Davolio",
          "Andrew Suyama",
          "Nige Buchanan",
          "Laura Fuller"
      })
      .Value(new string[] { "Anne King", "Andrew Fuller" })
)

我使用<a href="#" class="add">Add</a>按钮动态添加它。

这是我在MVC中的HTML页面我想在运行时克隆这个多选。

我正在使用以下javascript：

<script type="text/javascript">

function cloneTargetBox() {
    debugger;
    var targetBoxClone = $(".target-elements:first").clone();
    targetBoxClone.find("input").val("");
    targetBoxClone.insertAfter(".target-elements:last")
}

$(document).ready(function () {
    $(".add").click(cloneTargetBox);
});

如果我使用普通下拉列表，它会正常工作。但在剑道新添加的multiselect不起作用。

请建议。

Answer 1

我花了好几个小时来解决这个问题。我不认为可以做到。至少，不是.clone（）。即使您更改了ID和名称，克隆也会出现一系列问题。您将获得双重Multiselects（实际上，嵌套），或者您将单击其中一个，并打开上面的下拉菜单。您可以尝试按@StephenMueke建议执行.clone（true）深层复制，但同样，这不起作用。我认为问题是由于克隆区域之外的DOM中存在多选的元素。

我有一个解决方法，我是通过网络上的点点滴滴创建的，如果你把手放在.clone上并且仍然需要那个多选项，它可能是最后的手段。步骤是：

在将成为克隆目标的页面上设置隐藏的空选择。
```
 <select style="display:none" id="notYetMultiSelect> 
```
使用数据源设置设置源MultiSelect但是这样做。给它id =＆＃34; MS＆＃34;。

在你的cloneMultiSelect（）方法中，只需将隐藏的select增强为MultiSelect，并为其提供你的prexisting源的数据源。

// unhide the damn thing or you wont see it.
$("#notYetMultiSelect").show(); 
var masterMultiSelect = $("#MS").data('kendoMultiSelect');
var masterMultiSelectRecords =  masterMultiSelect.dataSource.data().toJSON();
// enhance as multiselect
$("#notYetMultiSelect").kendoMultiSelect({
dataTextField: "something",
dataValueField: "somethingElse",
placeholder: "whatever",
dataSource: masterMultiSelectRecords,
});

如果您想传输值，请继续。只需使用对主控的引用。

如何使用jquery克隆Kendo Multiselect

1 个答案: