Archive for July, 2012

Create a group with DropdownList using JQuery

July 24, 2012 1 comment

Hi all,

try this example to Create a group with DropdownList using JQuery

1) Open VS2008 and create a new website and add web page

2) From Toolbox drag DropdownList control

 <asp:DropDownList ID="DropDownList1" runat="server" Width="200px"

in code behind add the following code

protected void Page_Load(object sender, EventArgs e)
 if (!IsPostBack)
 DataTable table = new DataTable();
 table.Columns.Add("ID", typeof(int));
 table.Columns.Add("Number", typeof(int));
 // Here we add five DataRows.
 table.Rows.Add(1, 57);
 table.Rows.Add(2, 23);
 table.Rows.Add(3, 99);
 table.Rows.Add(4, 8);
 table.Rows.Add(5, 74);

DropDownList1.DataSource = table;
 DropDownList1.DataValueField = "ID";
 DropDownList1.DataTextField = "Number";


protected void DropDownList1_DataBound(object sender, EventArgs e)
 foreach (ListItem item in ((DropDownList)sender).Items)
 if (System.Int32.Parse(item.Text) < 50)
 item.Attributes.Add("classification", "LessThanFifty");
 item.Attributes.Add("classification", "GreaterThanFifty");

3) Add this Javascript code to create a group with DropdownList

<script type="text/javascript" src=""></script>
 <script type="text/javascript">
 $(document).ready(function() {
 //Create groups for dropdown list
 $("select#DropDownList1 option[classification='LessThanFifty']").wrapAll("<optgroup label='Less than fifty'>");
 $("select#DropDownList1 option[classification='GreaterThanFifty']").wrapAll("<optgroup label='Greater than fifty'>");

 background-color:Gray ;

Hope this helps

Good Luck

Categories: ASP.Net, Javascript, Jquery

Fill DropdownList through JSON data using jQuery

July 10, 2012 Leave a comment

Hi all,

try this example to Fill DropdownList through JSON data using jQuery

1) Open VS2008 and create a new website and add new web page

2) From Toolbox drag Lable and DropdownList

 <asp:DropDownList ID="DropDownList1"runat="server"/>
 <asp:Label ID="msg"runat="server"></asp:Label>

3) In Code behind add the following code :

public static List<Employee> fetchData()
 return new List<Employee>()
 new Employee{ Fullname="Aamir Hasan", ID=1},
 new Employee{ Fullname="Awais Ahmed", ID=2},
 new Employee{ Fullname="Mahwish Khan", ID=3},
 new Employee{ Fullname="Saba Khan", ID=4},
 new Employee{ Fullname="Hina Ahmed", ID=5},
 new Employee{ Fullname="Gill Gate", ID=6}

public class Employee
 public string Fullname { get; set; }
 public int ID { get; set; }

4) Now add this script to fill Dropdownlist

<script src="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
 <script language="javascript">
 type: "POST",
 url: "Default.aspx/fetchData",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (response) {
 var Dropdown = $('#<%=DropDownList1.ClientID %>');
 Dropdown.append(new Option("SELECT", 0));
 $.each(response.d, function (index, item) {
 Dropdown.append(new Option(item.Fullname, item.ID));
 error: function () {
 alert("Failed to load data");

$(document).ready(function () {
 var dropdown = $('#<%=DropDownList1.ClientID %>');
 dropdown.change(function () {


Now run your page

Hope this helps

Good Luck


Categories: ASP.Net, Jquery