knockout.js - 最初のドロップダウンを選択すると、関連するドロップダウンが表示される必要があります

Question

    var ViewModel = function () {
    var self = this;
    self.categories = ko.observableArray([
    {
    "name": "10th", "subcategories": [
    { "name": "SSC" },
    { "name": "CBSE" }
    ]
    },
    {
    "name": "12th", "subcategories": [{
    "name": "MPC"
    }, { "name": "BPC" }]
    }
    ]);
    self.selected_category = ko.observable();
    self.selected_sub_category = ko.observable();
    }
    ko.applyBindings(new ViewModel());

SSC と 12th のような 2 つの値を持つ最初のドロップダウンを選択しているため、最初の行の最初のドロップダウンに基づいて 2 番目のドロップダウンを表示する必要があります。追加ボタンをクリックすると、最初のドロップダウンは正しくバインドされますが、2 番目のドロップダウンの値は最初の行で選択されました。12番目に選択した2行目のような他の選択に応じて値をバインドするには、2番目のドロップダウンが必要なので、2番目のドロップダウンには、「SSC」と「CBSE」ではなく、値として「MPC」と「BPC」が必要です