在第一列中,我显示了大学列表。每个学院都有多个课程,这些课程已显示在第二列中。
对用户选择的限制:
当用户选择一所大学(比如麻省理工学院)时,应该允许他只选择与所选大学相对应的课程(在这种情况下是计算机科学和机械工程)。
如何使用 jQuery 实现此功能?
我将以下数据绑定到嵌套中继器中。
public string currentCollege { get; set; }
Dictionary<string, List<string>> colleges;
class College
{
public College(string s)
{
Course = s;
}
public string Course { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
colleges = new Dictionary<string, List<string>>();
colleges.Add("mit", new List<string>(new string[] { "computer science", "mechanical engg." }));
colleges.Add("caltech", new List<string>(new string[] { "electrical engg", "cryptography"}));
colleges.Add("harvard", new List<string>(new string[] { "language", "arts", "science" }));
rptColleges.DataSource = colleges;
rptColleges.DataBind();
}
protected void rptColleges_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Repeater rptCourseNow = (e.Item.FindControl("rptCourses") as Repeater);
rptCourseNow.DataSource = colleges[currentCollege];
rptCourseNow.DataBind();
}
}
标记如下 -
<asp:Repeater ID="rptColleges" runat="server" OnItemDataBound="rptColleges_ItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="rbCollege" runat="server" value=<%# DataBinder.Eval((KeyValuePair<string, List<string>>)Container.DataItem, "Key") %> />
<%# currentCollege = (string)DataBinder.Eval((KeyValuePair<string, List<string>>)Container.DataItem, "Key") %>
</td>
<td>
<asp:Repeater ID="rptCourses" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:RadioButton ID="rbCourse" value="<%#Container.DataItem %>" runat="server" />
<%#Container.DataItem %>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
谢谢您的帮助。