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 

3 comments:

  1. Thanks a lot my friend.i will be.

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

    ReplyDelete
  3. Again Thanks a lot To Reply Me

    ReplyDelete

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

.

ShibashishMnty
shibashish mohanty