如果已在上一行或下一行中选择了项目,请如何从选择下拉列表中删除项目

Question

我这里有三排.第一个下拉列表应显示所有名称.如果我从第一个下拉列表中选择一个名称,则下一个下拉列表不应包含在第一个下拉列表中选择的名称.

例如.如果我有{Peter,John,Michael},首先应该显示所有三个选项.如果我在第一个下拉列表中选择Peter,则下一行下拉列表应仅显示{John,Michael}.如果我在第二个下拉列表中选择John,则最终下拉列表应仅包含Michael.

<table>
     <tbody data-bind="foreach: Items">
         <tr>
             <td>
                 <select data-bind="options: $root.Persons, optionsText: 'name', event :{ change: $parent.SelectionChanged }" />
             </td>
           </tr>
  </tbody>
</table>

Answer 1

我已经简单地演示了你该做什么

function Person(firstName) {
    this.fname = firstName;
}

function ViewModel() {
    var self = this;
    self.FirstSelectedPerson = ko.observable();
    self.FirstSelectPersons = ko.observableArray([
    new Person('Mark'),
    new Person('Peter'),
    new Person('Smith')]);
    self.SecondSelectedPerson = ko.observable();
    self.SecondSelectPersons = ko.computed(function () {
        return ko.utils.arrayFilter(self.FirstSelectPersons(),

        function (person) {
            if (self.FirstSelectedPerson()) {
                if (person.fname.indexOf
                    (self.FirstSelectedPerson().fname) < 0) return true;
            }
        });
    });
}
ko.applyBindings(new ViewModel());

这是完整的代码JSfiddle