Link to home
Start Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

asked on

Create a Dropdown list with sub group

Hi Experts,

I need to create a sub gtoup in a dropdown list. For example, I want to show like this. I am using asp.net and VB.Net.

Group1
      Item1
      Item2
      Item3
Group2
      Item1
      Item2
      Item3

Thanks in advance.
Avatar of Lokesh B R
Lokesh B R
Flag of India image

Hi,

Check this

<select id="ddlSelect">
    <optgroup label="Group1">
        <option label="Item1">Item1</option>
        <option label="Item2">Item2</option>
        <option label="Item3">Item3</option>
    </optgroup>
    <optgroup label="Group2">
        <option label="Item1">Item1</option>
        <option label="Item2">Item2</option>
        <option label="Item3">Item3</option>
    </optgroup>
</select>

Open in new window

Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

ASKER

Hi,

Thank you so much for trying to help me. I need the groups and items to come from the table.

Thanks.
How is your data looks in table?

how are you identifing the heading and sub items?
GroupID      GroupName      MenuItemID      MenuItemName
8      Cheese      25      Cheese Pizza (VEG)
8      Cheese      12      Bean & Cheese Quesadilla (GF & VEG)
8      Cheese      13      Bean & DF Cheese Quesadilla (GF, VEG, & V)
8      Cheese      26      Cheese Quesadilla (GF & VEG)
8      Cheese      28      Cheese Quesadilla w/ DF Cheese (GF, VEG, & V)
8      Cheese      27      Cheese Quesadilla (VEG)
8      Cheese      121      Vegetable Quesadilla (VEG)
8      Cheese      122      Vegetable Quesadilla w/ DF cheese (VEG & V)
18      Grilled Cheese      64      Grilled Cheese on GF Bread (GF & VEG)
18      Grilled Cheese      65      Grilled Cheese w/ DF Cheese (VEG & V)
18      Grilled Cheese      63      Grilled Cheese (VEG)

I want like this

Cheese
    Cheese Pizza (VEG)
    Bean & Cheese Quesadilla (GF & VEG)
    ...
    ...
Grilled Cheese
    Grilled Cheese on GF Bread (GF & VEG)
    Grilled Cheese w/ DF Cheese (VEG & V)
   
 
Thanks in advance.
Are you doing with MVC?
No. ASP.net and VB.Net.
Hi,

here is the C# code to do that.


public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [System.Web.Services.WebMethod]
        public static string GetPizzaList()
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder();

            List<Pizza> list = new List<Pizza>();

            list.Add(new Pizza() { GroupID = 8, GroupName = "Cheese", MenuItemID = 25, MenuItemName = "Cheese Pizza (VEG)" });
            list.Add(new Pizza() { GroupID = 8, GroupName = "Cheese", MenuItemID = 12, MenuItemName = "Bean & Cheese Quesadilla (GF & VEG)" });
            list.Add(new Pizza() { GroupID = 8, GroupName = "Cheese", MenuItemID = 13, MenuItemName = "Bean & DF Cheese Quesadilla (GF, VEG, & V)" });
            list.Add(new Pizza() { GroupID = 18, GroupName = "Grilled Cheese", MenuItemID = 65, MenuItemName = "Grilled Cheese on GF Bread (GF & VEG)" });
            list.Add(new Pizza() { GroupID = 18, GroupName = "Grilled Cheese", MenuItemID = 66, MenuItemName = "Grilled Cheese w/ DF Cheese (VEG & V)" });

            var query = (from p in list
                         group p by p.GroupID into r
                         select new
                         {
                             GroupId = r.Key,
                             Items = list

                         }).ToList();

            foreach (var item in query)
            {
                sb.AppendLine("<optgroup label='" + list.Where(c => c.GroupID == item.GroupId).FirstOrDefault().GroupName + "'>");

                var subItems = item.Items.Where(c => c.GroupID == item.GroupId).ToList();
                if (subItems != null)
                {
                    foreach (var c in subItems)
                    {
                        sb.AppendLine("<option Value=label='" + c.MenuItemID + "' label='" + c.MenuItemName + "'>" + c.MenuItemName + "</option>");

                    }
                }

                sb.AppendLine("</optgroup>");

            }

            return sb.ToString();
        }

        public class Pizza
        {
            public int GroupID { get; set; }
            public string GroupName { get; set; }
            public string MenuItemName { get; set; }
            public int MenuItemID { get; set; }
        }
    }

Open in new window


ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
        </div>
    </form>
</body>
</html>


<script type="text/javascript">

    $(document).ready(function () {

        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetPizzaList",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {

                $("#DropDownList1").append(r.d);
            }
        });

    });

</script>

Open in new window

How do I do it using db table?

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Lokesh B R
Lokesh B R
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks.