title: Cascading drop down list (SubLocality) not working in asp.net mvc
body: <p><strong>I have three dropdown List.The First action method for City drop down is as---</strong></p>
  
  <pre><code>            public ActionResult Create()
              {
          List&lt;SelectListItem&gt; li = new List&lt;SelectListItem&gt;();
          li.Add(new SelectListItem { Text = "Select your City", Value = "----" });
          li.Add(new SelectListItem { Text = "Faridabaad", Value = "Faridabaad" });
          li.Add(new SelectListItem { Text = "Greater Noida", Value = "Greater Noida" });
          li.Add(new SelectListItem { Text = "Gurgaon", Value = "Gurgaon" });
          li.Add(new SelectListItem { Text = "Noida", Value = "Noida" });
          li.Add(new SelectListItem { Text = "New Delhi", Value = "New Delhi" });
          ViewData["City"] = li;
          return View();
      }
  </code></pre>
  
  <p><strong>then i have action method for my Locality drop down list which changes as we change city name like this------</strong></p>
  
  <pre><code>        public JsonResult LoadLocalities(string id)
      {
          List&lt;SelectListItem&gt; localities = new List&lt;SelectListItem&gt;();
          switch(id)
          {
        case"New Delhi":
           localities.Add(new SelectListItem { Text = "Select your locality", Value = "0" });
                  localities.Add(new SelectListItem{ Text ="East Delhi", Value = "1" });
                      localities.Add(new SelectListItem{ Text ="West Delhi", Value = "2" });
                          localities.Add(new SelectListItem{ Text ="North Delhi", Value = "3" });
                          localities.Add(new SelectListItem { Text = "South Delhi", Value = "4" });
                          break;           
          }
          return Json(new SelectList(localities, "Value", "Text"));
      }
  </code></pre>
  
  <p><strong>and the action method for the last sub locality drop down which changes with the change in locality name is like this---</strong></p>
  
  <pre><code>      public JsonResult LoadSubLocalities(string id)
         {
          List&lt;SelectListItem&gt; sublocalities = new List&lt;SelectListItem&gt;();
          switch (id)
          {
              case"1":
                  sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });
                  sublocalities.Add(new SelectListItem { Text = "Region1", Value = "1" });
                  sublocalities.Add(new SelectListItem { Text = "Region2", Value = "2" });
                  break;
          }
          return Json(new SelectList(sublocalities, "Value", "Text"));
      } 
  </code></pre>
  
  <p><strong>now the view page is something like this------</strong></p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
          &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
  &lt;script src="~/Scripts/jquery-2.1.4.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;   
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="map_canvas" style="width: 800px; height: 700px; float:left"&gt;&lt;/div&gt;
    @using (Html.BeginForm())
    {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary(true)
  
      &lt;fieldset&gt;
          &lt;legend&gt;Enter the Project Details&lt;/legend&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.City)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @if (ViewData.ContainsKey("City")){
              @Html.DropDownListFor(model =&gt; model.City, ViewData["City"] as List&lt;SelectListItem&gt;, new { style = "width:250px", @class = "DropDown1"})
                      @Html.ValidationMessageFor(model =&gt; model.City)
              }
      &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Locality)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" })
              @Html.ValidationMessageFor(model =&gt; model.Locality)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.SubLocality)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.DropDownList("SubLocality", new SelectList(string.Empty, "Value", "Text"), "Please Select a sub locality", new { style = "width:250px", @class = "DropDown1" })
              @Html.ValidationMessageFor(model =&gt; model.SubLocality)
          &lt;/div&gt;
            &lt;p&gt;
              &lt;input type="submit" value="Save Project" /&gt;
             &lt;/p&gt;
             &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>Now my javaScript code is something like this where i have written code to fetch city from controller then change locality as the city name changes and change sub locality name with change in locality name-----</strong></p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;        
          $(document).ready(function () {
          $("#City").change(function () {
              $("#Locality").empty();
              $.ajax({
                  type: 'POST',
                  url: '@Url.Action("LoadLocalities","Project")',
                  dataType: 'json',
                  data: { id: $("#City").val() },
                  success: function (localities) {
                      $.each(localities, function (i, locality) {
                          $("#Locality").append('&lt;option value="' + locality.Value + '"&gt;' +
                               locality.Text + '&lt;/option&gt;');
                      });
                  },
                  error: function (ex) {
                      alert('Failed to retreive Locality.' + ex);
                  }
              });
              return false;
          })
                  $("#Locality").change(function () {
                  $("#SubLocality").empty();
                  $.ajax({
                      type: 'POST',
                      url: '@Url.Action("LoadSubLocalities")',
                      dataType: 'Json',
                      data: { id: $("Locality").val() },
                      success: function (sublocalities) {
                          $.each(sublocalities, function (i, sublocality) {
                              $("#SubLocality").append('&lt;option value="' + sublocality.Value + '"&gt;' +
                                   sublocality.Text + '&lt;/option&gt;');
                          });
                      },
                      error: function (ex) {
                          alert('Failed to retrieve SubLocality.' + ex);
                      }
                  });
                  return false;
              })
              });
           &lt;/script&gt;
         }
  </code></pre>
  
  <p><strong>Now, My problem is that my Locality is working fine with change in city name but SubLocality drop down is not working with change in locality name---</strong></p>