Articles → JQUERY → Cascading Drop Downs In Jquery

Cascading Drop Downs In Jquery

In this article I will explain how to implement cascading drop down in jQuery.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2005 (or above) is installed on your machine.
Latest jQuery file i.e. jquery-latest.js (from the path http://code.jquery.com/jquery-latest.js) is downloaded on your system.
SQL server 2005 (or above) is installed on your machine.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create project using visual studio?
Basics about SQL server objects like tables.
How to create table in SQL server?
Basics about asp.net server controls like drop down, button.
Basics about ADO.Net i.e. how to fetch data from SQL server?
Basics about jQuery like what is ready function, how to register control’s event in jQuery etc?

Steps Of Execution

In this tutorial I will execute certain steps for the demonstration of cascading drop down in jQuery. These steps are

Create a new project
Add reference of jQuery.js
Create tables in database
Add data in the table
Add 3 dropdowns on the page
Add a method to bind dropdowns
Call jQuery method to bind country drop down
Call jQuery method to bind state drop down
Call jQuery method to bind city drop down

Let us execute each step

Create A New Project

First of all create a new website (Or web based project). See the screen shot below for project structure.

Picture showing the folder structure in solution explorer

Click to Enlarge

Add Reference Of Jquery.Js

You can either download the latest jQuery file and use the following code

<script src="Script/jquery-latest.js" type="text/javascript"></script>

Or you can directly give the URL of the JS file where the file is stored on the server

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Create Tables In Database

For this tutorial I have added three tables i.e. Country, State and City. See the screen shot below for table schema.

Picture showing the table schemas for country, state and city table

Click to Enlarge

Add Data In The Table

Add data in the tables. See the screen shot below for table data

Picture showing the data inserted into the country, state and city table

Click to Enlarge

Add 3 Dropdowns On The Page

Add 3 dropdowns on the page. See the screen shot below for UI

Picture showing the dropdowns when no data is bind

Click to Enlarge

Add A Method To Bind Dropdowns

Add three methods in the code behind

GetCountry() = Method to get list of countries from Country table.
GetState() = Method to get the list of states of a particular country.
GetCity() = Method to get the list of cities of a particular state.

See the code section below

using System;
using System.Web.Services;
using System.Collections;
using System.Data.SqlClient;
using System.Data;

public partial class _Default: System.Web.UI.Page { 
  
  [WebMethod]
	public static ArrayList GetCountry() {
		DataSet resultSet = new DataSet();
		ArrayList list = new ArrayList();
		using(SqlConnection connection = new SqlConnection("connection_string")) {
			connection.Open();
			using(SqlDataAdapter adapter = new SqlDataAdapter("select country_id,country_name from Country", connection)) {
				adapter.Fill(resultSet);
			}

			if (resultSet != null) {
				if (resultSet.Tables.Count > 0) {
					list.Add(new {
						Value = "",
						Display = ""
					});
					foreach(DataRow row in resultSet.Tables[0].Rows) {
						list.Add(new {
							Value = row["country_id"],
							Display = row["country_name"]
						});
					}

				}
			}
		}
		return list;
	} 
  
  [WebMethod]
	public static ArrayList GetState(int countryId) {
		DataSet resultSet = new DataSet();
		ArrayList list = new ArrayList();
		using(SqlConnection connection = new SqlConnection("connection_string")) {
			connection.Open();
			using(SqlDataAdapter adapter = new SqlDataAdapter("select state_id,state_name from state where country_id=" + countryId, connection)) {
				adapter.Fill(resultSet);
			}

			if (resultSet != null) {
				if (resultSet.Tables.Count > 0) {
					list.Add(new {
						Value = "",
						Display = ""
					});
					foreach(DataRow row in resultSet.Tables[0].Rows) {
						list.Add(new {
							Value = row["state_id"],
							Display = row["state_name"]
						});
					}

				}
			}
		}
		return list;
	}

	[WebMethod]
	public static ArrayList GetCity(int stateId) {
		DataSet resultSet = new DataSet();
		ArrayList list = new ArrayList();
		using(SqlConnection connection = new SqlConnection("connection_string")) {
			connection.Open();
			using(SqlDataAdapter adapter = new SqlDataAdapter("select city_id,city_name from City where state_id=" + stateId, connection)) {
				adapter.Fill(resultSet);
			}

			if (resultSet != null) {
				if (resultSet.Tables.Count > 0) {
					list.Add(new {
						Value = "",
						Display = ""
					});
					foreach(DataRow row in resultSet.Tables[0].Rows) {
						list.Add(new {
							Value = row["city_id"],
							Display = row["city_name"]
						});
					}

				}
			}
		}
		return list;
	}
}

In the code above I am querying SQL server using ADO.Net classes and fetching data. Finally data is returned in the form of array list. It is required to add WebMethod attribute above method.

Call Jquery Method To Bind Country Drop Down

First of all use jQuery’s ajax method to call the code behind’s GetCountry() method. This method is called in jQuery’s ready method(). In other words country drop down gets populated when page is loaded.

$().ready(function() {
      //   Option to bind drop down from code behind
      $.ajax({
        type: "POST",
        url: "Default.aspx/GetCountry",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
          $.each(msg.d, function(key, value) {
            var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
            $('#<%=ddlCountry.ClientID %>').append(option);
          });
        },
        error: function() {
          alert("Error in loading contents");
        }
      });

See the description of each parameter in ajax() method.

type specifies whether you are using GET or POST method.
url contains ASPX_PAGE/METHOD_NAME. For example we have a page Default.aspx and we are calling a method GetCountry to fetch list of countries so url in above code is Default.aspx/GetCountry.
data means what are the input parameter we are passing in the METHOD_NAME method.
contentType means encoding.
dataType means the format in which the input parameter is passed in METHOD_NAME method.
success means action when call is successful.
error means action when call is not successful.

Call Jquery Method To Bind State Drop Down

Call the code behind method GetState from ajax on the onchange event of country drop down. See the code section below

//  Register On change event
$('#<%=ddlCountry.ClientID %>').change(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/GetState",
    data: "{countryId:" + $('#<%=ddlCountry.ClientID %>').val() + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      $('#<%=ddlState.ClientID %>').html('');
      $.each(msg.d, function(key, value) {
        var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
        $('#<%=ddlState.ClientID %>').append(option);
      });
    },
    error: function() {
      alert("Error in loading subjects");
    }
  });

});

Call Jquery Method To Bind City Drop Down

Call the code behind method GetCity from ajax on the onchange event of state drop down. See the code section below

$('#<%=ddlState.ClientID %>').change(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/GetCity",
    data: "{stateId:" + $('#<%=ddlState.ClientID %>').val() + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      $('#<%=ddlCity.ClientID %>').html('');
      $.each(msg.d, function(key, value) {
        var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
        $('#<%=ddlCity.ClientID %>').append(option);
      });
    },
    error: function() {
      alert("Error in loading subjects");
    }
  });

});

Full jQuery code –

$().ready(function() {
  //   Option to bind drop down from code behind
  $.ajax({
    type: "POST",
    url: "Default.aspx/GetCountry",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      $.each(msg.d, function(key, value) {
        var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
        $('#<%=ddlCountry.ClientID %>').append(option);
      });
    },
    error: function() {
      alert("Error in loading contents");
    }
  });

  //  Register On change event
  $('#<%=ddlCountry.ClientID %>').change(function() {
    $.ajax({
      type: "POST",
      url: "Default.aspx/GetState",
      data: "{countryId:" + $('#<%=ddlCountry.ClientID %>').val() + "}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
        $('#<%=ddlState.ClientID %>').html('');
        $.each(msg.d, function(key, value) {
          var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
          $('#<%=ddlState.ClientID %>').append(option);
        });
      },
      error: function() {
        alert("Error in loading subjects");
      }
    });

  });
  //   End

  //  Register On change event
  $('#<%=ddlState.ClientID %>').change(function() {
    $.ajax({
      type: "POST",
      url: "Default.aspx/GetCity",
      data: "{stateId:" + $('#<%=ddlState.ClientID %>').val() + "}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
        $('#<%=ddlCity.ClientID %>').html('');
        $.each(msg.d, function(key, value) {
          var option = '<option value="' + value.Value + '">' + value.Display + '</option>'
          $('#<%=ddlCity.ClientID %>').append(option);
        });
      },
      error: function() {
        alert("Error in loading subjects");
      }
    });

  });
});

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, April 18, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**