淘汰赛数据绑定下拉菜单取决于其他下拉菜单

Question

我正在尝试对 2 个下拉菜单进行数据绑定，其中第二个下拉菜单取决于第一个下拉菜单中选择的内容。

我有这个数据结构：

{
EducationId: 1,
EducationCategories:[{
    Name: "Category1",
    Educations: [{
        Id: 1,
        Name: "Education1"
    }, {
        Id: 2,
        Name: "Education2"
    }]
}, {
    Name: "Category2",
    Educations: [{
        Id: 3,
        Name: "Education3"
    }, {
        Id: 4,
        Name: "Education4"
    }]
}]
}

我想通过淘汰赛将数据绑定到 2 个不同的“选择”，这样我就有 1 个包含所有类别名称的下拉列表，以及第 2 个包含教育的下拉列表。

EducationId 是指选择的教育，因此在数据示例中，第一个下拉菜单是“Category1”，第二个是“Education1”。

但是我怎样才能使第二个下拉列表只填充属于在第一个下拉列表中选择的类别的教育？然后将第二个下拉列表的值（id）绑定到 EducationId。

数据由敲除映射插件映射。

Answer 1

使用computed 属性在第一个下拉列表中的选定值更改时更新第二个下拉列表。

例如：

var data = {
    EducationId: 1,
    EducationCategories :[{
        Name: "Category name1",
        Educations: [{
            Id: 1,
            Name: "Education name1"
        }, {
            Id: 2,
            Name: "Education name2"
        }]
    }, {
        Name: "Category name2",
        Educations: [{
            Id: 3,
            Name: "Education name3"
        }, {
            Id: 4,
            Name: "Education name4"
        }]
    }]
};

var viewModel = ko.mapping.fromJS(data);

viewModel.selectedCategory = ko.observable();
viewModel.Educations = ko.computed(function() {
    if (viewModel.selectedCategory()) {
        return viewModel.selectedCategory().Educations();
    }
});
viewModel.selectedEducation = ko.observable();

ko.applyBindings(viewModel);

<script src="https:////cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<select data-bind="options: EducationCategories, value: selectedCategory, optionsText: 'Name'"></select>

<select data-bind="options: Educations, value: selectedEducation, optionsText: 'Name'"></select>