Javascript 动态更改Kendo MultSelect的DataTextField

我有一个剑道组合框，有两个值：Main和Secondary。我还有一个剑道mutliselect链接到数据源。默认情况下，组合框显示“Main”，多选显示“Parent1”、“Parent2”，即数据源的“Name”字段

如果用户从组合框中选择“Secondary”，我想动态地将multiselect的dataTextField更改为Name2。同样，当用户从下拉框中选择“Main”时，multiselect应该链接到“Name”作为其dataTextField

这是你的电话号码

HTML

<select id="CategoryOption" style="width: 100px;">
<option>Main</option>
<option>Secondary</option>
</select> <br><br><br><br><br><br>
<select id="MainCategory" style="width: 90%;"></select> 

外部来源

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>

---

剑道小部件通常在目标元素周围创建一个包装器结构，该结构不会被方法

destroy（）

破坏（我认为这是一件坏事）

所以销毁（或从DOM中删除）小部件并不是那么简单。请查看：

function createMainCategory(usersDiv, textField, valueField, remove) 
{
    var mc = $("#MainCategory");

    if (remove)
    {
        // Destroys the widget
        mc.data("kendoMultiSelect").destroy();

        // Get the widget wrapper element structure
        var p = mc.closest(".k-widget");

        // Detache the #MainCategory from the wrapper structure
        mc = mc.empty().detach();

        // Remove the wrapper structure
        p.remove();

        // Append the #MainCategory to the body again
        $('body').append(mc);
    }

    $("#MainCategory").kendoMultiSelect({
        dataSource: [
            { Name: "Parent1", Id: 1, Name2: "Child1" },
            { Name: "Parent2", Id: 2, Name2: "Child2" }
        ],
        dataTextField: textField,
        dataValueField: valueField
    });
}

如您所见，在删除块中

• 使用内置方法销毁小部件

  destroy（）

• 然后，它选择主包装元素，其中包含所有内部结构
• 在删除它之前，它会选择并在包装器外部选择

  #main category

  （

  detach（）

  会删除它，但会返回它的引用以供进一步操作元素）
• 因此，使用

  #main category

  safe，它可以从DOM中删除包装器的整个结构
• 最后在主体上再次添加了

  #maincography

  ，用于托管新的小部件

function createMainCategory(usersDiv, textField, valueField, remove) 
{
    var mc = $("#MainCategory");

    if (remove)
    {
        // Destroys the widget
        mc.data("kendoMultiSelect").destroy();

        // Get the widget wrapper element structure
        var p = mc.closest(".k-widget");

        // Detache the #MainCategory from the wrapper structure
        mc = mc.empty().detach();

        // Remove the wrapper structure
        p.remove();

        // Append the #MainCategory to the body again
        $('body').append(mc);
    }

    $("#MainCategory").kendoMultiSelect({
        dataSource: [
            { Name: "Parent1", Id: 1, Name2: "Child1" },
            { Name: "Parent2", Id: 2, Name2: "Child2" }
        ],
        dataTextField: textField,
        dataValueField: valueField
    });
}