淘汰JS可观察对象，删除并重新添加选择选项

Question

因此，我对淘汰赛可观察到的事物很熟悉，但是这个问题有些棘手。

因此，假设您有一些数据： var data = ['cat', 'dog', 'bird']

现在，假设您有两个使用此数据的下拉菜单，因此两个都填充有相同的数据。

如果我在下拉菜单A中选择了猫，那么我应该不会在下拉菜单B中看到猫。应该将其删除。 然后，如果我选择淹没在A中的鸟，应该将其从下拉B中删除，然后将猫作为选择选项重新添加。 如果我从下拉菜单B中选择猫，也应该说同样的话，也应该将其从A中删除。

现在我去哪了？ 没有其他地方了：

viewModel.dropDownA.subscribe(function(selectedValueFromB){ });
viewModel.dropDownB.subscribe(function(selectedValueFromA){ });

我什至不确定是否正确设置了这些设置，例如我如何让下拉菜单B收听下拉菜单A中发生的事情，反之亦然？

救命

Answer 1

如果要处理少量下拉列表，则可以使用计算函数轻松完成此操作。

HTML：

<select data-bind="options: optionsA, optionsCaption: '', value: selectedA"></select>
<select data-bind="options: optionsB, optionsCaption: '', value: selectedB"></select>

JS：

    var self = this;

    self.data = ['cat', 'dog', 'bird'];
    self.selectedA = ko.observable();
    self.selectedB = ko.observable();

    self.optionsA = ko.computed(function(){
      return self.data.filter(function(item){
        return item !== self.selectedB();
      });
    });

    self.optionsB = ko.computed(function(){
      return self.data.filter(function(item){
        return item !== self.selectedA();
      });
    });