Question

我正在制作游戏，并且有一个特定的要求，即玩家选择可玩的角色竞赛，然后我想要第二个下拉列表来显示该种族的可用性别列表。我认为使用Cascade的{{1}}属性很容易做到这一点......就像这样。

kendo.ui.DropDownListOptions

来自var racesOptions = { index: -1, valuePrimitive: true, dataTextField: "Name", dataValueField: "Name", dataSource: { transport: { read: { dataType: 'json', url: '/api/races/list', type: 'GET' } } } }; var genderOptions = { index: -1, valuePrimitive: true, cascadeFrom: 'race', cascadeFromField: 'Genders' };的数据形状如下所示;

/api/races/list

我认为这将是一个明智的选择。第二次下降从第一次下降;当第一个有值时，我认为第二个会得到[{ "Name": "race1", // ... other data ... // "Genders": [ "Male", "Female", "Other" ] }, { "Name": "race2", // ... other data ... // "Genders" : ["Female"] }, { "Name": "race3", // ... other data ... // "Genders": ["Male"] }]值。但事情并没有发生......事实上，我能够实现这一目标的唯一方法是在CascadeFromField小部件#race事件中使用以下代码

change

这种改变事件确实有效，但它很麻烦而且有些迟钝。还有另一种方法可以让Cascading像我期待的那样工作吗？

Answer 1

cascadeFromField:的值需要指向父ID字段。在您的情况下，Races数据源中的ID字段。

这是一个应该有所帮助的小例子。

<h4>Race:</h4>
<input id="race" />

<h4>Gender:</h4>
<input id="gender" />

<script>
    $("#race").kendoDropDownList({
        optionLabel: "Select race...",
        dataTextField: "raceName",
        dataValueField: "raceID",
        dataSource: [
            { raceName: "Race1", raceID: 1 },
            { raceName: "Race2", raceID: 2 },
            { raceName: "Race3", raceID: 3 }
        ]
    });

    $("#gender").kendoDropDownList({
        optionLabel: "Select gender...",
        cascadeFrom: "race",
        cascadeFromField: "raceID",
        dataTextField: "genderName",
        dataValueField: "genderID",
        dataSource: [
            { genderName: "Male", genderID: 1, raceID: 1 },
            { genderName: "Female", genderID: 2, raceID: 1 },
            { genderName: "Other", genderID: 3, raceID: 1 },
            { genderName: "Female", genderID: 4, raceID: 2 },
            { genderName: "Male", genderID: 4, raceID: 3 }
        ]
    });
</script>

您可以使用上面的代码查看此demo。

KendoDropDownList - 将数据从一个下拉列表级联到另一个下拉列表

1 个答案: