Kendo 级联 DropDownlists 和可用的下拉项答案

【问题标题】：Kendo cascasding DropDownlists and available dropdown itemsKendo 级联 DropDownlists 和可用的下拉项
【发布时间】：2013-05-14 00:47:33
【问题描述】：

我正在使用 KendoUI 创建级联下拉列表。问题是级联中的第二个和第三个下拉列表只有 3 个项目中的 1 个。

HTML

<div id="goodies">
        <input id="uno"  data-bind="source: unoTypes, value: uno" />
        <input id="dos"  data-bind="source: dosTypes, value: dos" />
        <input id="tres"  data-bind="source: tresTypes, value: tres" />
</div>

还有 javascript

data = window.kendo.observable({
    uno: null,
    dos: null,
    tres: null,
    baseRomType: null,
    unoTypes: [
                { name: "Bing", id: 1 },
                { name: "Bang", id: 2 },
                { name: "Bong", id: 3 }
    ],
    dosTypes: [
              { name: "Ding", id: 1 },
              { name: "Dang", id: 2 },
              { name: "Dong", id: 3 }
    ],
    tresTypes: [
              { name: "Ring", id: 1 },
              { name: "Rang", id: 2 },
              { name: "Rong", id: 3 }
    ],


});

window.kendo.bind($("#goodies"), data);

$('#uno').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Uno'
});

$('#dos').kendoDropDownList({

    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    cascadeFrom: "dos"
});

见JS fiddle

我做错了什么还是这是一个错误？我在 KendoUI 2013.Q1 (2013.1.319)

【问题讨论】：

标签： html mvvm drop-down-menu kendo-ui

【解决方案1】：

我知道这是一个老问题，但我只是偶然发现了它，并想我会提供一个答案，以防其他人遇到类似问题。

据我所知，您实际上并不需要级联下拉菜单，而是您只想在选择前一个下拉菜单后启用下一个下拉菜单（而不是级联，它会过滤下一个下拉菜单中的项目）在上一个下拉菜单中选择的选项上）？

首先，更新您的 HTML 以添加启用绑定。

<div id="goodies">
    <input id="uno"  data-bind="source: unoTypes, value: uno" />
    <input id="dos"  data-bind="source: dosTypes, enabled: uno, value: dos" />
    <input id="tres"  data-bind="source: tresTypes, enabled: dos, value: tres" />
</div>

然后，更新您的 javascript 以删除 cascadeFrom 设置：

$('#dos').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    //cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    //cascadeFrom: "dos"
});

你可以看到更新的jsFiddle here

【讨论】：