Question

在第一栏中，我正在显示大学名单。每所大学都有多门课程，已在第二栏中展示。

对用户选择施加限制：

当用户选择大学（比如麻省理工学院）时，应该允许他选择与所选大学相对应的课程（在这种情况下是计算机科学和机械工程）。

如何使用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" />
                            &nbsp; <%#Container.DataItem %>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate></ul></FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

感谢您的帮助。

Answer 1

如果我理解正确，你想把单选按钮分组到一所大学。您可以使用RadioButton的GroupName属性使单选按钮部分互斥。

点击此链接：

RadioButton.GroupName Property

限制两列中继器中的单选按钮选择

1 个答案: