如何創建共享單個列表的鏈接下拉列表，並確保只能在一個下拉列表中選擇每個值？

Question

我想創建一組使用淘汰賽的下拉菜單，允許用戶從列表中選擇最多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種可能性必須基於最初的數據，並且不包括其他三個下拉列表中的選定數據。我真的很掙扎着。我甚至無法接近實施它。

這甚至可能還是淘汰賽的適當使用，或者我應該只是看看JS有一個onchange

Answer 1

這是絕對有可能在淘汰賽。可能有10種方法可以做到這一點。我想出了一個在這裏的方法：

http://jsfiddle.net/mbest/wfW97/

下面是引用的代碼：我用我的repeat綁定插件

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

：

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創建重複的選擇元素，但是如果你想要的話，你可以使用其他方法。