Thursday, December 22

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 

4 comments:

  1. I was actually looking for this resource a few weeks back. Thanks for sharing with us your wisdom.This will absolutely going to help me in my projects .
    Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!
    Trumpet Wedding Dresses
    New Style Flower Girl Dresses
    Wedding Dresses with Sleeves
    Column Wedding Dresses
    New Style Wedding Dresses

    ReplyDelete
  2. Nice posting, I subsribe your feed. Keep it up with fresh idea.

    ReplyDelete

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty