jQuery Cascading DropDownList

In this article we will explore how to create cascading dropdownling using jQuery and webmethods.
Let's see how we can do this.
Step 1: Place two select and a div in the body tag.

    <select id="carmanufacturer">
      <option value="0">Select</option>
</select><select id="model">
      <option value="0">Select</option>
</select><div id="errMessage"></div>

Step 2: Place below javascript in the page to populate carmanufacturer and model dropdownlist

<script language="javascript" type="text/javascript">
      $(document).ready(function() {
            //Below function will fill second dropdownlist on change of first dropdownlist.
            var changeDrop = function() {
                  $.ajax({
                        type: "POST",
                        url: "jQueryCascadingDropDownList.aspx/GetCarModel",
                        data: "{'manufacturerid': " + $('#carmanufacturer').val() + "}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(response) {
                        var carModel = response.d;
                        $('#model option').remove();
                        var selectOption = $(document.createElement('option'));
                        $('#model').append(selectOption.val("0").html("Select"));
                        for (var i = 0; i < carModel.length; i++) {
                              var selectOption = $(document.createElement('option'));
                              $('#model').append(selectOption.val(carModel[i].manufacturerid).html(carModel[i].manufacturerModel));
                        }
                  },
                  failure: function(errMsg) {
                        $('#errMessage').text(errMsg);
                  }
            });
       }
      $.ajax({
            type: "POST",
            url: "jQueryCascadingDropDownList.aspx/GetCarManufacturer",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                  var carManufacturer = response.d;
                  for (var i = 0; i < carManufacturer.length; i++) {
                        var selectOption = $(document.createElement('option'));
                        $('#carmanufacturer').append(selectOption.val(carManufacturer[i].manufacturerid).html(carManufacturer[i].manufcturerName));
                  }
                  $('#carmanufacturer').change(changeDrop);
            },
            failure: function(errMsg) {
                  $('#errMessage').text(errMsg);
            }
      });
});
</script>
Before populating second dropdownlist, it needs to be cleared.

$('#model option').remove();

"Select" option needs to be added to second dropdownlist prior to adding data.
var selectOption = $(document.createElement('option'));
$('#model').append(selectOption.val("0").html("Select"));
We can pass data to webmethod like below
data: "{'manufacturerid': " + $('#carmanufacturer').val() + "}",

Step 3:  Create a class Cars

public class Cars{
      public string manufcturerName;
      public int manufacturerid;
      public string manufacturerModel;
}

Step 4: Create a method GetCarManufacturer which will fill the first dropdownlist

[WebMethod]
public static List<Cars> GetCarManufacturer()
{
      return PrepareCarData();
}
public static List<Cars> PrepareCarData()
{
      List<Cars> objCars = new List<Cars> {
            new Cars{manufcturerName = "Merc", manufacturerid= 1} ,
            new Cars{manufcturerName = "BMW", manufacturerid= 2} ,
            new Cars{manufcturerName = "Audi", manufacturerid= 3} ,
            new Cars{manufcturerName = "Suzuki", manufacturerid= 4}
      };
      return objCars;
}

Step 5: Create a method GetCarModel which will be invoked on change of first dropdownlist, manufacturer id will be passed from javascript.

[WebMethod]
public static List<Cars> GetCarModel(int manufacturerid)
{
      List<Cars> lstCars = new List<Cars>();
      Cars objCars = null;
      var carModel = (from cm in PrepareCarModel() where cm.manufacturerid == manufacturerid select new { manuModel = cm.manufacturerModel, manuId = cm.manufacturerid });
      foreach (var cm in carModel)
      {
            objCars = new Cars();
            objCars.manufacturerid = cm.manuId;
            objCars.manufacturerModel = cm.manuModel;
            lstCars.Add(objCars);
      }
      return lstCars;
}
public static List<Cars> PrepareCarModel()
{
      List<Cars> objCars = new List<Cars> {
            new Cars{manufacturerModel = "C Class", manufacturerid= 1} ,
            new Cars{manufacturerModel = "S Class", manufacturerid= 1} ,
            new Cars{manufacturerModel = "E Class", manufacturerid= 1} ,
            new Cars{manufacturerModel = "3 Series", manufacturerid= 2} ,
            new Cars{manufacturerModel = "5 Series", manufacturerid= 2} ,
            new Cars{manufacturerModel = "7 Series", manufacturerid= 2 } ,
            new Cars{manufacturerModel = "A4", manufacturerid= 3} ,
            new Cars{manufacturerModel = "A5", manufacturerid= 3} ,
            new Cars{manufacturerModel = "Q5", manufacturerid= 3 } ,
            new Cars{manufacturerModel = "Q7", manufacturerid= 3 } ,
            new Cars{manufacturerModel = "Swift", manufacturerid= 4} ,
            new Cars{manufacturerModel = "SX4", manufacturerid= 4} ,
            new Cars{manufacturerModel = "Alto", manufacturerid= 4 } ,
            new Cars{manufacturerModel = "Ritz", manufacturerid= 4}
      };
      return objCars;
}


Live Demo
This ends the article of cascading dropdownlist using jquery.
Like us if you find this post useful. Thanks! 
Shibashish mohanty

DownLoad code here
Download Code
Download Code