0

我正在使用 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 小提琴

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

4

1 回答 1

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

于 2013-11-29T10:47:05.747 回答