Question

所以我熟悉淘汰观察者，但这个问题有点棘手。

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

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

如果我在下拉A中选择猫，那么我不应该在下拉B中看到猫。应该将其移除。然而，如果我然后选择淹没A中的鸟，那么它应该从下拉B中移除并且猫应该作为选择选项重新添加。如果我从下拉B中选择cat，应该说同样的，应该从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();
      });
    });

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

1 个答案: