Question

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

例：
[下拉列表1] ................. [下拉列表2] ............ [下拉列表3]
阿格拉：选择......................德里........................ ....... 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类似于我的演示，即第一个下拉列表中定义的可用选项。

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

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

1 个答案: