Javascript 淘汰：当选择其他元素时，从multiselect控件中删除一个元素

我正在使用knockout，我有一个项目列表，比如：

Tomato,
Potato,
Broccoli, 
Bean

所有这些项目都允许用户从multiselect表单控件中选择

<select class="form-control" multiple
  data-bind="selectPicker: Types,
  optionsText: 'Name',
  optionsValue: 'VegetableTypeId',
  selectPickerOptions: { optionsArray: AvailableVegetableTypes }">
</select>

问题是我使用的是ObservalArray.Remove，所以在当前运行完成之前再次调用我的函数。这应该不是问题，因为删除后的第一个更改是“删除”类型，所以不应该执行整个逻辑

但是在这之后，当我再次选择番茄/土豆时，没有任何东西被激发。最后我实际上选择了番茄和土豆。 然后，当我取消选择这两个选项中的一个并再次选择时，一切正常，然后整个情况重复

---

你有什么想法吗？

我不明白你为什么使用

选择器

绑定而不是普通的

选项

和

选择选项

绑定

然而，我构建了一个简单的演示，它实现了所需的行为。你可以在这里找到它：

请注意，每当您在马铃薯之后选择番茄时，马铃薯将变为未选择

您的思路是正确的：您需要订阅所选项目的数组，并检查是否有任何无效的选择。我希望这有帮助

以下代码供参考：

HTML:

this.Types.subscribe(changes => {
        var VegetableTypes = this.AvailableVegetablesTypes();
        var company = VegetableTypes.First(element => element.VegetableTypeId == changes[0].value);
        if (changes[0].status == "added") {
            if (Vegetable.IsTomato) {
                this.Types.remove(element =>
                    VegetableTypes.First(baseElement =>
                        baseElement.VegetableTypesTypeId == element && baseElement.IsPotato));
            } else if (Vegetable.IsPotato) {
                this.Types.remove(element =>
                    VegetableTypes.First(baseElement =>
                        baseElement.VegetableTypesTypeId == element && baseElement.IsTomato));
            }
        }
    }, null, "arrayChange");

<select class="form-control" multiple="true"
  data-bind="options: availableVegetableTypes, selectedOptions: selected">
</select>

var availableVegetableTypes = ['Tomato',
'Potato',
'Broccoli', 
'Bean'];

var selected = ko.observableArray();

var unselectMap = {
  'Tomato': 'Potato'
};

selected.subscribe(function(selectedOptions){
  var keysToUnselect = [];
  console.log("Selected", selectedOptions);
  selectedOptions.forEach(function(selectedOption){
    if (unselectMap[selectedOption] != null) {
      // This key exists in the unselect map
      // Let's check if the value is in the array
      if (_.contains(selectedOptions, unselectMap[selectedOption])) {
        // The invalid key exists. Let's mark it for removal.
        keysToUnselect.push(unselectMap[selectedOption]);
      }
    }
  });
  if (keysToUnselect.length > 0) { 
    console.log("Unselect", keysToUnselect);
    var reject = function(v){
      return _.contains(keysToUnselect, v);
    };
    filteredSelectedOptions = _.reject(selectedOptions, reject);
    console.log("Filtered", filteredSelectedOptions);
    selected(filteredSelectedOptions);
  }
});

ko.applyBindings({
  availableVegetableTypes:availableVegetableTypes,
  selected: selected
});