0

我如何在 jquery 中设计具有公共菜单的多个下拉列表，这样当一个人被要求使用三个下拉列表选择三个首选项时，当前下拉列表应该只有那些以前未选择的公共菜单中的选项

示例：
[下拉列表 1].......[下拉列表 2]............[下拉列表 3]
agra ：已选择.............德里............ ......马图拉德里
............................马图拉...... .....................德里：选定
的马图拉...................... ....阿拉哈巴德：选择
阿拉哈巴德

4

1 回答 1

2

好吧，这就是多选列表的用途，但如果你真的想要三个单独的下拉菜单，这里有一些我为你准备的东西：

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，即，在第一个下拉列表中定义了可用选项。

一些浏览器不允许你使用 CSS 来隐藏选项元素，所以我采取的方法是，当第一个下拉列表中的选择发生变化时，它会从第二个和第三个中删除选项，并只放回不同的选项. 如果在第二个和第三个中有先前的选择，如果它仍然可用，它会恢复它。

于 2012-07-23T06:31:43.747 回答