如何在mvc中使用ajax和jquery代码实现国家、州、城市等级联下拉列表

如何实现像国家、州、城市这样的级联下拉列表 在mvc中使用ajax和jquery 我有一个名为“公司详细信息”的页面，在这里我需要输入公司地址，如国家、州、城市。现在，我的要求是，如果我选择印度作为国家，那么印度所有州的列表都应该显示在州下拉框中，从中我应该选择一个州，比如说安得拉邦，如果我选择它，安得拉邦的所有城市都应该显示在城市下拉框中

               @model CascadingDropdown.Models.Country
                  @{
                      ViewBag.Title = "Index";
                  }

                  <script src="~/Scripts/jquery-1.7.1.min.js"></script>

                  <h2>Cascading Dropdownlist</h2>
                  <table>
                      <tr>
                          <td>
                              <label>Country</label>
                          </td>
                          <td id="Country">

                              @Html.DropDownListFor(x => x.CountryName, Model.lstCountry, "--Select--", new { @id =   
"ddlCountry" })


       - List item

                          </td>
                      </tr>
                      <tr>
                          <td>
                              <label>State</label>
                          </td>
                          <td id="State">

                              @Html.DropDownListFor(x => x.StateName, new List<SelectListItem>(), "--Select--", new { @id =  
"ddlState" })
                          </td>
                      </tr>

                      <tr>
                          <td>
                              <label>City</label>
                          </td>
                          <td id="City">

                              @Html.DropDownListFor(x => x.CityName, new List<SelectListItem>(), "--Select--", new { @id = "ddlCity" })
                          </td>
                      </tr>

                  </table>

                  <script type="text/javascript">
                              $(document).ready(function () {
                                  $('#ddlCountry').change(function () {
                                      $.ajax({
                                          type: "post",
                                          url: "/Home/GetState",
                                          data: { Country_Code: $('#ddlCountry').val() },
                                          datatype: "json",
                                          traditional: true,
                                          success: function (data) {                            
                                              var state = "<select id='ddlState'>";
                                              state = state + '<option value="">--Select--</option>';
                                              for (var i = 0; i < data.length; i++) {
                                                  state = state + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                                              }
                                              state = state + '</select>';
                                              $('#State').html(state);
                                          }
                                      });
                                  });
                              });

                  </script>*****

controller code 

   [HttpPost]
        public JsonResult GetStatesByCountry(string id)
        {
            int ids = Convert.ToInt32(id);
            var states = model.GetStateByCountry(ids);
           SelectList obgcity = new SelectList(states, "StateId", "State", 0);
            return Json(obgcity);
        }

         public ActionResult Country()
         {
             IEnumerable<Country> country;
             country = model.GetCountryList();
             ViewBag.Country = new SelectList(country, "CountryId", "County", "CountryId");
             return View();
         }
    }



cshtml code will be this

@{
    ViewBag.Title = "Country";
}

<h2>Country</h2>
@using (Html.BeginForm())
{
    @Html.DropDownList("Country", ViewData["country"] as List<SelectListItem>)

    @Html.DropDownList("State", new SelectList(string.Empty, "Value", "Text"), "Please select a State", new { style = "width:250px", @class = "dropdown1" })
}

<script type="text/javascript">

    $(document).ready(function () {
        $("#Country").change(function () {
            var url = "/ManageEmployee/GetStatesByCountry";
            var countryID = $("#Country").val();
         $.ajax({
                url: url,
                data: { id: countryID },
                cache: false,
                type: "POST",
                success: function (data) {
                    var markup = "<option value='0'>Select City</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                    }
                    $("#State").html(markup).show();
                },
                error: function (reponse) {
                    alert("error : " + reponse);
                }
            });
        });

    });
</script>