javascript - Knockout JS observables，删除并重新添加选择选项

Question

所以我熟悉 knockout 可观测量，但这个问题有点棘手。

假设您有一些数据:var data = ['cat', 'dog', 'bird']

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

如果我在下拉菜单 A 中选择 cat，那么我不应该在下拉菜单 B 中看到 cat。它应该被删除。然而，如果我随后在下拉 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();
      });
    });