javascript - 销毁多选小部件

Question

我想销毁并重新创建来自 Telerik's Kendo UI 的多选小部件.通常这是我以前做过很多次的简单事情，但从来没有使用过多选。我现在面临的问题是应该工作的方式(至少我认为应该)......不。

这是我用来销毁和重新创建组件(如网格或下拉列表)的代码:

if ($('#dropdown1').data('kendoDropDownList')) {
    $('#dropdown1').data('kendoDropDownList').destroy();
    $('#dropdown1').html('');
}

我怎么说 - 如果我在下拉菜单或网格上使用它 - 它有效。但在多选上它没有:

if ($('#multiselect1').data('kendoMultiSelect')) {
    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').html('');
}

我准备小Dojo example在哪里显示行为。当下拉列表被销毁并重新创建时，它看起来是正确的。当我对 Multiselect 执行相同操作时，它总是将小部件添加为下一行。

当然我可以通过更改 dataSource 并调用 read 方法或类似的方法来解决这个问题，但我想知道它是否是错误或者是否有另一种方法可以销毁多选。

谢谢。

Answer 1

此代码使用 unwrap() 从 kendo 包装器 div 中删除原始输入，然后使用 .remove() 删除剩余的 kendo DOM 元素:

$('html').on('click', '#destroy2', function(e){
  if ($('#multiselect1').data('kendoMultiSelect')) {
    alert('multiselect exists - destroying and recreating');

    $('#multiselect1').data('kendoMultiSelect').destroy();
    $('#multiselect1').unwrap('.k-multiselect').show().empty();
    $(".k-multiselect-wrap").remove();

    $("#multiselect1").kendoMultiSelect({
      dataSource: {
        data: ["Three3", "Four4"]
      }
    });

    $('#text2').text('Multiselect AFTER calling destroy');
  }

});