如何选择更改后仅显示在下拉列表中的选项

在更改类别时，如何选择下拉列表中可见的选项元素？

让我用代码给你看，以便进一步解释。

var Foo = function () {
    var self = this;
    self.id = ko.observable();
    self.types = ko.observableArray([{ id: 1, type: 'type1' }, { id: 2, type: 'type2' }]);
    self.selectedBar = ko.observable();
    self.selectedType = ko.observable();
    
    self.selectedBar.subscribe(function(){
        
    });
};
var vm = (function () {
    var foos = ko.observableArray([]),
        loadFoo = function () {
            foos.push(new Foo()
                      .id(1)
                      .selectedBar(1)
                      .selectedType(1));
            foos.push(new Foo()
                      .id(2)
                      .selectedBar(2)
                      .selectedType(2));
            foos.push(new Foo()
                      .id(3)
                      .selectedBar(3)
                      .selectedType(2));
        },
        bars = ko.observableArray([
            { id: 1, bar: 'bar1' },
            { id: 2, bar: 'bar2', },
            { id: 3, bar: 'bar3', }
        ]);
    return {
        foos: foos,
        loadFoo: loadFoo,
        bars: bars
    };
}());
vm.loadFoo();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div style="float: left">
    <table>
        <tr>
            <th>Bar</th>
            <th>Foo</th>
        </tr>
        <!-- ko foreach: foos -->
        <tr>
            <td>
                <select data-bind="options: $root.bars, optionsText: 'bar', optionsValue: 'id', value: selectedBar"></select>
            </td>
            <td>
                <select data-bind="options: types, optionsText: 'type', optionsValue: 'id', value: selectedType"></select>
            </td>
        </tr>
        <!-- /ko -->
    </table>
</div>
<div style="float: left">
    <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>

在Bar列中，如果我选择bar1，我可以在类型栏中选择的将是type1ype2。但是，如果我选择的不是栏1，我只能选择类型2。

这可能吗？我尝试过手动订阅，但似乎无法实现。

任何帮助都将不胜感激。感谢