MVC 4使用Razor禁用多个下拉列表中的值

时间:2013-11-25 20:06:10

标签: javascript jquery asp.net-mvc-4 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; }
}

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

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

在我的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>
   }
}

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

修改

对于2个下拉列表,我将类设置为“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>

1 个答案:

答案 0 :(得分:0)

在下拉列表中设置额外信息,只需添加html属性

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

对于保留名称,您必须在它之前添加@(类,样式等)以用于其他所有其他名称(id,name等)。用a只能改变你的课程。无法覆盖名称和ID。如果您有任何其他问题,请告诉我