如何选择只会在更改时的下拉菜单中显示的选项

Question

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

让我通过代码向您展示进一步解释。

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>

在栏列中，如果我选择 bar1 ，我在类型列中可以选择的内容将是 type1 和 type2 。但是，如果我选择 bar1 以外的选项，我只能选择 type2 。

这可能吗？我尝试过手动订阅，但似乎无法使其正常工作。

非常感谢任何帮助。感谢

Answer 1

您可以使用类似

的计算扩展Foo对象

self.displayedTypes = ko.computed(function(){

        if(self.selectedBar()=="1"){
          return [{ id: 1, type: 'type1' }, { id: 2, type: 'type2' }];
        };

        if(self.selectedBar()=="2"){
          return [{ id: 2, type: 'type2' }];
        }
});

你的HTML就像

<select data-bind="options: displayedTypes, optionsText: 'type', optionsValue: 'id', value: selectedType"></select>