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

Select

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. 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 GetCarManufacturer() { return PrepareCarData(); } public static List PrepareCarData() { List objCars = new List { 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 GetCarModel(int manufacturerid) { List lstCars = new List(); 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 PrepareCarModel() { List objCars = new List {
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!
chinmaya parija

DownLoad code here
Download Code
Download Code