Cascaded Drop down list in ASP.NET MVC using JQuery

To implement cascaded Drop down list in ASP.NET MVC2.

This part of code gives the method to implement cascaded drop down list. For example I have a set of data in my first drop down list. And on selected index change of first drop down list, my second dropdown list should display its corresponding value. Here I use jQuery to implement this.

This java script is called on selected index change of first dropdown list. And sets the value for the second drop down list.

$(document).ready(function () {
$("#ddlFirst").change(function () { // first drop down selected index change
LoadSecondDDL($("#ddlFirst ").val());

}).change(); // For 1st data in on load
});

function LoadSecondDDL (Group) {
var url= "<%= ResolveUrl("~/Controller/GetSecondDDL") %>";//Controller/ ActionResult
$.getJSON(url, { Group: Group }, function (data) {
$("#ddlSecond").empty(); //Clear the drop down list
$("# ddlSecond ").append("" + "All" + "");
$.each(data, function (index, ddl2) {
$("# ddlSecond ").append("" + ddl2.Text + "");
});
});
}


This method is given in the controller which is been called from the JavaScript. This method returns the set of second dropdown list values.

public ActionResult GetSecondDDL (string Group)
{
SelectList ddl2 = new SelectList(GetSecondDDLSet(Group), "ValueField", "TextField");
return this.Json(ddl2, JsonRequestBehavior.AllowGet);
}