选择元素无法使用淘汰赛正确更新

Question

Background

I have a situation where I want to have a few dropdown menus which change options based on what is available. I've managed to simplify this code and replicate the problem with the code below.

In this example I have 5 available colors and I want to choose four of them. If I select one, then I want it to not be available in the other menus.

Problem

The dropdown menus only sort of work. The options that are shown do seem to be valid based on what's available, however sometimes when selecting an entry it will not allow it until I choose a second time. Also, as seen in commented code below, a lodash _.sortBy seems to break functionality altogether.

HTML

<div data-bind="foreach:colorChoices">
  <select data-bind="options: localAvailableOptions, optionsCaption: 'Select...', optionsText: function(currentValue) {return 'Color ID ' + currentValue;}, value: id"></select>
</div>

Javascript

function appModel() {
    var self = this;
    self.colorIds = [1, 2, 3, 4, 5];
    self.colorChoices = ko.observableArray();

    self.selectedColorIds = ko.computed(function() {
        return _(self.colorChoices())
            .filter(function(item) {
                return item.id()
            })
            .map(function(item) {
                return item.id()
            })
            .value();
    });

    self.availableColorIds = ko.computed(function() {
        return _.difference(self.colorIds, self.selectedColorIds());
    });

    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
    self.colorChoices.push(new colorChoice(self));
}

function colorChoice(parent) {
    var self = this;
    self.id = ko.observable();
    self.localAvailableOptions = ko.computed(function() {
        //clone as to not modify original array
        var availableIds = _.clone(parent.availableColorIds());
        //add own ID so dropdown menu contains matching entry
        if (self.id()) {
            availableIds.push(self.id());
        }
        //seems to break with _.sortBy
        //return _.sortBy(availableIds);
        return availableIds;
    });
}

ko.applyBindings(new appModel());

CodePen (same code)

https://codepen.io/anon/pen/KEKPKV

Answer 1

I found the issue.

if (self.id()) {
    availableIds.push(self.id());
}

This was missing a check to see if it already existed, and meant that the available options included duplicate values, which was presumably producing the undefined behavior.