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.
|