使用多个下拉列表从多个选择中选择首选项

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来隐藏选项元素，因此我采取的方法是当选择在第一个下拉列表中更改时，它将选项从第二个和第三个选项中删除，然后放回那些是不同的。如果在第二个和第三个选项中存在先前的选择，则如果它仍然可用，则恢复它。