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

Question

所以我熟悉knockout observables，但这个问题有点棘手。

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

现在让我们假设你有一个使用该数据的两个下拉菜单，所以两者都填充了相同的数据。

如果我在下拉A中选择猫，那么我不应该在下拉B中看到猫。它应该被移除。如果我再选择淹死A的鸟，那么它应该从下拉B中删除，并且应该重新添加猫作为选择选项。同样应该说，如果我从下拉B选择猫，它应该从A中删除。

现在我得到了哪里？没有其他地方那么：

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

我甚至不知道我是否设置这些正确的，像我怎么会做下拉乙听听是怎么回事，在下拉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(); 
     }); 
    });