使用多個下拉列表從多個選擇中選擇首選項

Question

如何設計jQuery中的多個下拉列表，具有常見菜單 ，這樣當有人被要求使用三個下拉列表選擇三個首選項時 那麼當前下拉列表應該只有以前沒有選擇的通用菜單中的選項

例如：
[下拉列表1] ................. [下拉列表2] ............ [下拉列表3]
agra：選擇......................德里.... ........................... mathura
delhi ................... .... ............. mathura ......................... delhi：精選
mathura ..... .........................阿拉哈巴德：選中
阿拉哈巴德

Answer 1

那麼這是一個多選列表，但如果你真的要三個獨立的下拉菜單這裏有一個小東西我颳起了你：

var $one = $("#one"), 
    $two = $("#two"), 
    $three = $("#three"), 
    $options = $one.children().clone(); 

$one.change(function() { 
    var oneVal = $one.val(), 
     twoVal = $two.val(); 
    $two.empty() 
     .append($options.clone().filter(function(){ 
            return this.value != oneVal; })) 
     .children().filter(function(){ return this.value == twoVal; }) 
     .prop("selected",true); 
    $two.change(); 
}); 

$two.change(function() { 
    var oneVal = $one.val(), 
     twoVal = $two.val(), 
     threeVal = $three.val(); 
    $three.empty(); 
    if (twoVal === "") 
     return;   
    $three.append($options.clone().filter(function() { 
      return this.value != twoVal && this.value != oneVal; 
     })) 
     .children().filter(function(){ return this.value == threeVal; }) 
     .prop("selected",true); 
}); 

演示：http://jsfiddle.net/G89m2/

這裏假設你有HTML在我的演示，也就是類似的東西，在規定的可用選項fi首先下拉。

某些瀏覽器不允許您使用CSS來隱藏選項元素，因此我採取的方法是當選擇在第一個下拉列表中更改時，它將選項從第二個和第三個選項中刪除，然後放回那些是不同的。如果在第二個和第三個選項中存在先前的選擇，則如果它仍然可用，則恢復它。