Cascading Dropdown list in ASP.Net MVC2

I am using mvc2 with c# ASP.Net. iam trying to implement cascaded dropdownlist, wherein my first dropdown is named group and my second one is division. so on se开发者_Go百科lecting the group its respective divisions are to be displayed in my 2nd dropdown list..

here is the code that i tried to implement

this is my view part.

<%= Html.DropDownList("ddlGroup", IEnumerable<SelectListItem>)ViewData["ddlGroup"])%>
<select id="ddlDivision" name="Division"></select>

and the script part is

$(document).ready(function () {
  $("#ddlGroup").change(function () {   // group drop down selected index change       
    LoadDivision($("#ddlGroup").val());          
  }).change(); // For 1st data in on load
});

function LoadDivision (Group) {     
  var url = "../Training/GetJsonDivision";
  $.getJSON(url, { Group: Group }, function (data) {        
    $.each(data, function (index, optionData) {                 
      $("#ddlDivision").append("<option value'" + optionData.Division + "'>" + optionData.Division + "</option">);
    });
  });
}

and my controller part is

public ActionResult GetJsonDivision(string Group)
{        
    SelectList division = new SelectList(GetDivision(Group), "Division", "Division");
    return this.Json(division, JsonRequestBehavior.AllowGet);
}

here my GetJsonDivision returns the set of division for the given group. in my jquery, on getJSON function call, it goes to the controller and the method gets executed but after for each statement, i am not able to bind the data to the dropdown list.

can any one help me out on this. I am not clear about what is that optionData that we are giving in the callback function parameter, and how its been mapped to the return values.

thanks and Regards Malathy.

I dont believe you're really adding a new element when you insert that text straight up. For example, try something like this:

$(data).each(function()
{
     var option = $('<option />');
     option.val(this.Division).text(this.Division);
     $('#ddlDivision').append(option);
});

Try that and see if it works.