我有一个问题,我试图为每个对象添加两个下拉列表。对象是动态的,所以我可以有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>
答案 0 :(得分:0)
在下拉列表中设置额外信息,只需添加html属性
@Html.DropDownListFor(x => x.SelectedItems, Model.ListItems, new { @class = "DropDown1" })
对于保留名称,您必须在它之前添加@(类,样式等)以用于其他所有其他名称(id,name等)。用a只能改变你的课程。无法覆盖名称和ID。如果您有任何其他问题,请告诉我