title: Cascading Dropdown list in ASP.Net MVC2
body: <p>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 selecting the group its respective divisions are to be displayed in my 2nd dropdown list..</p>
  
  <p>here is the code that i tried to implement</p>
  
  <p>this is my view part.</p>
  
  <pre><code>&lt;%= Html.DropDownList("ddlGroup", IEnumerable&lt;SelectListItem&gt;)ViewData["ddlGroup"])%&gt;
  &lt;select id="ddlDivision" name="Division"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>and the script part is </p>
  
  <pre><code>$(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("&lt;option value'" + optionData.Division + "'&gt;" + optionData.Division + "&lt;/option"&gt;);
      });
    });
  }
  </code></pre>
  
  <p>and my controller part is </p>
  
  <pre><code>public ActionResult GetJsonDivision(string Group)
  {        
      SelectList division = new SelectList(GetDivision(Group), "Division", "Division");
      return this.Json(division, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>thanks and Regards
  Malathy.</p>