Javascript 如何创建共享单个列表的链接下拉列表，并确保每个值只能在一个下拉列表中选择？

我正在尝试创建一组下拉列表，使用敲除功能，允许用户从列表中选择最多3个值，例如颜色。列表的开头是：-红色、橙色、黄色、绿色、蓝色、靛蓝、紫色

DropDown 1 - Select any of the 7
DropDown 2 - Select any of the 6 remaining
Dropdown 3 - Select any of the 5 remaining

如果用户返回并将下拉列表1更改为其他颜色，则他们只能选择其他剩余颜色（以及下拉列表1中的颜色）。如果他们改变它，我就可以去下拉列表2或3，并将其更改为1中的值

我想我需要一个包含7项的初始数组，然后我需要一个可观察的下拉列表。这3个可观测数据必须基于初始数据，并且不包括其他三个下拉列表中选定的数据。我真的很挣扎。我甚至不能接近实现它

---

这是否有可能或适合用于击倒，或者我是否应该只看一下带有onChange的JS，这在击倒中肯定是可能的。大概有10种方法可以做到这一点。我想出了一个办法：

以下是代码供参考：

function ViewModel() {
    var self = this;
    self.colors = ['red','orange','yellow','green','blue','indigo','violet'];
    self.selections = [];
    ko.utils.arrayForEach(self.colors, function() {
        self.selections.push(ko.observable());
    });
    self.selfAndUnselectedColors = function(index) {
        var selfColor = self.selections[index]();
        return ko.utils.arrayFilter(self.colors, function(color) {
            return color === selfColor || !ko.utils.arrayFirst(self.selections, function(sel) {
                return color === sel();
            });
        });
    }
}
ko.applyBindings(new ViewModel());

和HTML：

<div data-bind="repeat: colors.length">
    <select data-bind="options: selfAndUnselectedColors($index), optionsCaption: 'select a color', value: selections[$index]"></select>
</div>​

​

---

我正在使用我的绑定插件创建重复的select元素，但是如果您愿意，可以使用其他方法。

太好了。非常感谢你在这方面的帮助，以及在击倒赛上的出色表现！我只想要3个，所以改变了重复。其余的都很完美。这在很多应用程序中都非常有用。这将是伟大的击倒食谱网站和收集所有这些随机的东西在一起。它可以做很多非常有用的事情。我把它改为使用索引作为选择列表。我想知道您是否知道如何为每个下拉列表设置初始值？