淘汰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();
      });
    });