Javascript MVC4使用Razor禁用多个下拉列表中的值

我遇到了一个问题，我试图为每个对象添加两个下拉列表。这些对象是动态的，所以我可以有6个对象，每个对象内有2个相应的下拉列表。在这些下拉列表中，将有1-4个选项和初始空值。对于每个对象对应的下拉列表，我希望它只允许唯一的选择

比如说。对象1有2个下拉列表，包含3个选项。用户在第一个下拉列表中选择1，因此无法在第二个下拉列表中选择1。用户在第二个下拉列表中选择3，因此无法在第一个下拉列表中选择3。对象2将有它自己的2个下拉列表，仅受它自己的下拉列表的影响，而不受对象1中的下拉列表的影响

我目前正在动态创建下拉列表，如下所示：

public class FormInformation
{
    public IEnumerable<SelectListItem> ListItems { get; set; }
    public string[] SelectedItems { get; set; }
    public ServiceObject serviceObject { get; set; }
}

公共类表单信息
{
公共IEnumerable列表项{get；set；}
公共字符串[]SelectedItems{get；set；}
公共服务对象服务对象{get；set；}
}

这是我初始化下拉列表的方式：

private SelectList CreateSelectListItems(int counter, List<string> clients)
    {
        if (counter == 1)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                    }, "Id", "Name");
        }
        if (counter == 2)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                    }, "Id", "Name");
        }
        if (counter == 3)
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                        new {id = 4, Name = clients[2]},
                    }, "Id", "Name");
        }
        else
        {
            return new SelectList(new[]
                    {
                        new {id = 1, Name = ""},
                        new {id = 2, Name = clients[0]},
                        new {id = 3, Name = clients[1]},
                        new {id = 4, Name = clients[2]},
                        new {id = 5, Name = clients[3]},
                    }, "Id", "Name");
        }
    }

private SelectList CreateSelectListItems（整数计数器、列表客户端）
{
如果（计数器==1）
{
返回新的选择列表（新[]
{
新的{id=1，Name=”“}，
新的{id=2，Name=clients[0]}，
}“身份证”、“姓名”）；
}
如果（计数器==2）
{
返回新的选择列表（新[]
{
新的{id=1，Name=”“}，
新的{id=2，Name=clients[0]}，
新的{id=3，Name=clients[1]}，
}“身份证”、“姓名”）；
}
如果（计数器==3）
{
返回新的选择列表（新[]
{
新的{id=1，Name=”“}，
新的{id=2，Name=clients[0]}，
新的{id=3，Name=clients[1]}，
新的{id=4，Name=clients[2]}，
}“身份证”、“姓名”）；
}
其他的
{
返回新的选择列表（新[]
{
新的{id=1，Name=”“}，
新的{id=2，Name=clients[0]}，
新的{id=3，Name=clients[1]}，
新的{id=4，Name=clients[2]}，
新的{id=5，Name=clients[3]}，
}“身份证”、“姓名”）；
}
}

在我的cshtml中，我有：

@using (Html.BeginForm())
{
    for(int i = 0; i < Model.serviceObject.forms.Count; i++)
    {
       <h2><b>Form Name:</b> @Model.serviceObject.forms[i].formName</h2>
    <div style="overflow: hidden;">
        <div style="float: left; margin-left: 50px;">
            Signer1:
            @Html.DropDownListFor(x => x.SelectedItems, Model.ListItems)
        </div>
        <div style="float: left; margin-left: 120px;">
            Signer 2: 
            @Html.DropDownListFor(x => x.SelectedItems, Model.ListItems)
        </div>
   </div>
   }
}

@使用（Html.BeginForm（））
{
for（int i=0；ix.SelectedItems，Model.ListItems）
签署人2：
@Html.DropDownListFor（x=>x.SelectedItems，Model.ListItems）
}
}

我现在的问题是，我不知道如何将下拉列表设置为彼此唯一。也许使用Jquery？我对Jquery不是很有经验，所以我不太确定它是否真的是最好的解决方案。谢谢你抽出时间

编辑：

对于两个下拉列表，我将类设置为“DropDown1”，另一个设置为“DropDown2”。我正在尝试使用脚本，但现在还不知道如何使用它。到目前为止，我有这个。我知道大部分是错误的，但这是正确的方向/想法吗？我只需要多了解一点javascript

<script>
        var drop2 = /*What goes here?*/.DropDown2;
        $("select[class=DropDown1]").change(function () {
            var drop1Selected = parseInt(this.value);
            $("select[class=DropDown2]")
                    .html(drop2)
                    .find('option').filter(function () {
                        return parseInt(this.value) == drop1Selected;
                    }).remove();
        });
    </script>

var drop2=/*这里是什么？*/.DropDown2；
$（“选择[class=DropDown1]”）。更改（函数（）{
var drop1select=parseInt（this.value）；
$（“选择[class=DropDown2]”）
.html（drop2）
.find（'option'）.filter（函数（）{
返回parseInt（this.value）=drop1Selected；
}).remove（）；
});

要在DropDownList上设置额外信息，只需添加html属性即可

@Html.DropDownListFor(x => x.SelectedItems, Model.ListItems, new { @class = "DropDown1" })

---

对于保留名称，您必须在其前面添加@（类、样式等），对于其他您不需要的内容（id、名称等）。有了a，你只能换个班了。无法覆盖名称和id。如果您有任何其他问题，请告诉我，该链接看起来很有用。我想我的另一个问题是，当我使用Razor时，如何设置下拉列表的名称？我感觉我快接近了。我现在对脚本有问题。我的答案与您发送给我的链接中的答案几乎相同，只是我将drop2变量更改为等于$（“选择[class=DropDown2]选项”）；并以此为基础，将结尾改为“相等”，而不是“小于”。但是，它在开头打断了：“属性“$”的值为null或未定义。不是函数对象。”我是否需要添加一些内容来防止这种情况发生？如果您在下拉列表中添加了一类DropDown2，则只需要.DropDown2来选择该项。选择器中的选项应选择下拉列表中的所有选项。我不知道你是不是想问这个问题，我在我的问题中加了一个脚本。我尝试了.DropDown2，但之前需要做些什么，我不知道是什么。下面是一篇关于使用下拉列表的文章。希望这里能有帮助。