Knockout databind dropdown depending on other dropdown

Question

I'm trying to databind 2 dropdowns, where the 2nd dropdown is dependent on what is chosen in the first.

I have this data scructure:

{
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"
    }]
}]
}

This i wanna databind to 2 different "selects" with knockout, so that i have 1 dropdown with all category names, and a 2nd with educations.

EducationId referes to the education that is selected, so in the data example first dropdown would be "Category1", and second would be "Education1".

But how can i make that the 2nd dropdown only gets populated with the educations belonging to the category selected in the first dropdown? and then bind the value(id) of the 2nd dropdown to EducationId.

The data gets mapped by the knockout mapping plugin.

possible duplicate of [large arrays in dependent observables - cascading](http://stackoverflow.com/questions/9070929/large-arrays-in-dependent-observables-cascading) — PW Kad, Oct 14 '14 at 13:16

score 1 · Accepted Answer · answered Oct 14 '14 at 13:11

Use a computed property to update the second drop-down when the selected value in the first changes.

For example:

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>

This almost does the job, but how about when loading the data? lets say EducationId=3. then the category should be 2 and education 3 when binding. So maybe make the selectedEducation computed? and some how check what category that is in? not sure how? — Christian Bekker, Oct 14 '14 at 13:48
Probably the easiest way would be to just filter through the categories until you find one with a matching educations (assuming the ids are unique across all categories) and set `selectedCategory` to that at the start. — Matt Burland, Oct 14 '14 at 14:15

Knockout databind dropdown depending on other dropdown

1 Answers1