如何在选择另一个选择框中的项目时从一个选择框中隐藏选项下的项目?

时间:2010-05-20 02:50:47

标签: javascript jquery

我是jQuery的新手,想知道如何根据另一个选择框的选择在选择框中隐藏选项。

我有5个选择框,这是供管理员选择有限标准的用户。 <options>是根据数据库查询和php的结果动态创建的,它们都具有相同的<options>

e.g。这是带有选项值的选择框的示例。

userbox1 - Amy, Bosh, Cathy, Daniel, Ethan
userbox2 - Amy, Bosh, Cathy, Daniel, Ethan
userbox3 - Amy, Bosh, Cathy, Daniel, Ethan
userbox4 - Amy, Bosh, Cathy, Daniel, Ethan
userbox5 - Amy, Bosh, Cathy, Daniel, Ethan

因此,如果管理员在userbox1中选择了Cathy,则Cathy将自动隐藏在用户框其余部分的选择中。如果管理员改变他/她的想法并重新选择另一个用户呼叫Ethan。用户盒应该能够在选择中显示Cathy的可用性。

我不确定是否隐藏/显示在这种情况下使用的正确状态。我是否知道如何编写上述功能?如果我错过了一些当前的参考文献,请指点我。提前谢谢。

1 个答案:

答案 0 :(得分:0)

这应该有效。如果没有,请不要开枪,我实际上没有测试过。如果它不起作用那么它应该至少接近你正在寻找的东西。

$('select option').click(function(e) {
    var $that = $(this)
      , $others = $('select option:contains(' + $that.text() + ')').not($that).hide();

    $('select option:hidden').not($others).show();
    return false;
});