ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Group items in ASP.Net DropDownList using jQuery<p>Hi <a class="username" rel="Chriz"> Chriz</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">DataBase</span></strong></p> <p>For this example I have used of NorthWind database that you can download using the link given below.</p> <p><span style="font-size: 10pt; font-family: arial,sans-serif; line-height: 115%;"><a href="http://www.microsoft.com/en-us/download/details.aspx?id=23654" target="_blank">Download Northwind Database</a></span></p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&nbsp;&lt;asp:DropDownList ID=&#34;ddlNames&#34; runat=&#34;server&#34;&gt; &lt;/asp:DropDownList&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { &nbsp;&nbsp;&nbsp; GroupDropdownlist(&#39;ddlNames&#39;) }); function GroupDropdownlist(id) { &nbsp;&nbsp;&nbsp; var selectControl = $(&#39;#&#39; + id); &nbsp;&nbsp;&nbsp; var groups = []; &nbsp;&nbsp;&nbsp; $(selectControl).find(&#39;option&#39;).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; groups.push($(this).attr(&#39;data-group&#39;)); &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; var uniqueGroup = groups.filter(function (itm, i, a) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return i == a.indexOf(itm); &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; $(uniqueGroup).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var Group = jQuery(&#39;&lt;optgroup/&gt;&#39;, { label: $(this)[0] }).appendTo(selectControl); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var grpItems = $(selectControl).find(&#39;option[data-group=&#34;&#39; + $(this)[0] + &#39;&#34;]&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(grpItems).each(function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var item = $(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.appendTo(Group); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); } &lt;/script&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Data.SqlClient; using System.Configuration;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data.SqlClient Imports System.Data</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { &nbsp;&nbsp;&nbsp; if (!this.IsPostBack) &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string str = ConfigurationManager.ConnectionStrings[&#34;ConString&#34;].ConnectionString; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SqlConnection conn = new SqlConnection(str); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; conn.Open(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SqlCommand cmd = new SqlCommand(&#34;SELECT EmployeeID,FirstName,TitleOfCourtesy FROM Employees&#34;, conn); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SqlDataAdapter da = new SqlDataAdapter(cmd); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DataTable dt = new DataTable(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; da.Fill(dt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; foreach (DataRow row in dt.Rows) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ListItem item = new ListItem(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Text = row[&#34;FirstName&#34;].ToString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Value = row[&#34;EmployeeID&#34;].ToString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Attributes[&#34;data-group&#34;] = row[&#34;TitleOfCourtesy&#34;].ToString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ddlNames.Items.Add(item); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; conn.Close(); &nbsp;&nbsp;&nbsp; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load &nbsp;&nbsp;&nbsp; If Not Me.IsPostBack Then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim str As String = ConfigurationManager.ConnectionStrings(&#34;ConString&#34;).ConnectionString &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim conn As SqlConnection = New SqlConnection(str) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; conn.Open() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim cmd As SqlCommand = New SqlCommand(&#34;SELECT EmployeeID,FirstName,TitleOfCourtesy FROM Employees&#34;, conn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim da As SqlDataAdapter = New SqlDataAdapter(cmd) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim dt As DataTable = New DataTable() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; da.Fill(dt) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; For Each row As DataRow In dt.Rows &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dim item As ListItem = New ListItem() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Text = row(&#34;FirstName&#34;).ToString() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Value = row(&#34;EmployeeID&#34;).ToString() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item.Attributes(&#34;data-group&#34;) = row(&#34;TitleOfCourtesy&#34;).ToString() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ddlNames.Items.Add(item) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Next &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; conn.Close() &nbsp;&nbsp;&nbsp; End If End Sub</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><span style="text-decoration: underline;"><strong><img src="https://i.imgur.com/PnS4VpS.jpg" alt="" width="250" height="340" /> </strong></span></p> <p>&nbsp;</p> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/194440/Group-items-in-ASPNet-DropDownList-using-jQuery/https://www.aspforums.net:443/Threads/194440/Group-items-in-ASPNet-DropDownList-using-jQuery/Wed, 18 Apr 2018 00:55:01 GMT