Question

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

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）

Answer 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

Kendo级联DropDown列表和可用的下拉项

1 个答案: