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

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

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

---

阿拉哈巴德（allahabad）

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

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);
});

演示：

这假设您在我的演示中有类似的html，即在第一个下拉列表中定义了可用选项

---

有些浏览器不允许使用CSS隐藏选项元素，因此我采用的方法是，当第一个下拉列表中的选项发生更改时，它会从第二个和第三个下拉列表中删除选项，并只放回不同的选项。如果在第二个和第三个选项中有以前的选项，如果仍然可用，则会将其还原。

您能告诉我们到目前为止您尝试了什么吗？