如何实现这样的级联下拉列表像国家，州，城市使用ajax和jQuery代码在mvc

Question

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

   @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>***** 

Answer 1

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>