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

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.

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.