Javascript Jquery和ajax不响应级联下拉列表

我对下拉式级联的AJAX和Jquery响应有问题。我正试图根据从下拉列表中选择的国家/地区列表更改状态。 我想我的剧本有点问题

视图：

控制器：

它的国家不是共同的我会试试这个

$("#countryid").change(function () {
   // this will call when Country Dropdown select change
   var countryid = parseInt(this.value); // use this.value of $(this).val()

---

您在cointryid附近有拼写错误，请将其更正为CountryId

我想你应该为下面的代码创建一个级联下拉列表

脚本：-

$(document).ready(function () {

        $("#CountryId").change(function () {

            $("#StateId").empty();
            $.post("/Home/GetState/", { id: $(this).val() }, function (response) {
             // $("#StatId").append("<option value=''></option>");
              $.each(response, function (index, data) {
                    $("#StateId").append( data.Text);
                });
            });
        });


        $("#StateId").change(function () {

            $("#CityId").empty();
            $.post("/Home/GetCity/", { id: $(this).val() }, function (response) {
                $("#CityId").append("<option value=''></option>");
                $.each(response, function (index, data) {
                    $("#CityId").append("<option value=" + data.Value + ">" + data.Text + "</option>");
                });
            });
        });
    });

控制器：-

 public ActionResult Index()
        {
            var countryList = db.Countries.ToList();

            ViewBag.CountryId = new SelectList(db.Countries, "CountryId", "CountryName");
            ViewBag.StateId = new SelectList(db.States, "StateId", "StateName");
            ViewBag.CityId = new SelectList(db.Cities, "CityId", "CityName");
            return View();
        }

        public JsonResult GetState(int id)
        {
            JsonResult result = new JsonResult();
            var statelist = (from s in db.States
                             where s.CountryId == id
                             select s).ToList();
            var selectlist = new SelectList(statelist, "StateId", "StateName");

            result.Data = selectlist;
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

        public JsonResult GetCity(int id)
        {
            JsonResult result = new JsonResult();
            var dt = db.Cities.Where(y => y.StateId == id);
            List<SelectListItem> mydata = new List<SelectListItem>();
            foreach (var c in dt)
            {
                mydata.Add(new SelectListItem() { Text = c.CityName, Value = c.CityId.ToString() });
            }
            result.Data = mydata;
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

试试这个：

@Html.DropDownListFor(model => model.countryid, @ViewBag.CountryID as SelectList, "Select Country", new { @id="countryid" })
@Html.DropDownListFor(model => model.stateid, @ViewBag.StateID as SelectList, "Select State", new { @id="stateid" })

<script type="text/javascript">
    $(function () {
        $("#countryId").change(
        function () {
            loadLevelTwo(this);
        });
        loadLevelTwo($("#countryId"));
    });
    function loadLevelTwo(selectList) {
        var selectedId = $(selectList).val();
        $.ajax(
        {
            url: "@Url.Action("GetStates", "Controller")",
            type: "GET",
            data: { countryid: selectedId },
            success: function (data) {
                $("#stateid").html($(data).html());
            },
        });
    }
</script>

---

谢谢你的答复。但它不起作用。我无法点击其中的脚本。谢谢你的回复。我更正了countryid。脚本文件根本没有被命中。

 public ActionResult Index()
        {
            var countryList = db.Countries.ToList();

            ViewBag.CountryId = new SelectList(db.Countries, "CountryId", "CountryName");
            ViewBag.StateId = new SelectList(db.States, "StateId", "StateName");
            ViewBag.CityId = new SelectList(db.Cities, "CityId", "CityName");
            return View();
        }

        public JsonResult GetState(int id)
        {
            JsonResult result = new JsonResult();
            var statelist = (from s in db.States
                             where s.CountryId == id
                             select s).ToList();
            var selectlist = new SelectList(statelist, "StateId", "StateName");

            result.Data = selectlist;
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

        public JsonResult GetCity(int id)
        {
            JsonResult result = new JsonResult();
            var dt = db.Cities.Where(y => y.StateId == id);
            List<SelectListItem> mydata = new List<SelectListItem>();
            foreach (var c in dt)
            {
                mydata.Add(new SelectListItem() { Text = c.CityName, Value = c.CityId.ToString() });
            }
            result.Data = mydata;
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

@Html.DropDownListFor(model => model.countryid, @ViewBag.CountryID as SelectList, "Select Country", new { @id="countryid" })
@Html.DropDownListFor(model => model.stateid, @ViewBag.StateID as SelectList, "Select State", new { @id="stateid" })

<script type="text/javascript">
    $(function () {
        $("#countryId").change(
        function () {
            loadLevelTwo(this);
        });
        loadLevelTwo($("#countryId"));
    });
    function loadLevelTwo(selectList) {
        var selectedId = $(selectList).val();
        $.ajax(
        {
            url: "@Url.Action("GetStates", "Controller")",
            type: "GET",
            data: { countryid: selectedId },
            success: function (data) {
                $("#stateid").html($(data).html());
            },
        });
    }
</script>