当另一个选择列表更改时，Ajax 调用以填充选择列表答案

【问题标题】：Ajax call to populate select list when another select list changes当另一个选择列表更改时，Ajax 调用以填充选择列表
【发布时间】：2016-04-04 01:38:48
【问题描述】：

从this post 开始，当另一个“国家”选择列表发生变化时，我正在尝试填充“城市”选择列表。我采用了与链接帖子相同的方法，并如下所述实施达林对成功（）的建议。它“大部分”时间都很好用（这真的很奇怪）。我的意思是，在我所有的“国家”中，90% 的更改事件返回选择列表项对象，另外 10% 返回单个字符串值。为什么会有所不同？它应该工作或不工作......

查看

<!--Country-->
                    <div class="form-group col-md-3">
                        <label class="control-label ">City </label>
                        <br />
                       <select id="Country" name="Country" class="form-control">
                           <option value="">List of countries from Model...</option>
                       </select>
                    </div>


<!--City-->
                    <div class="form-group col-md-3">
                        <label class="control-label ">City </label>
                        <br />
                       <select id="City" name="City" class="form-control">
                           <option value="">Select a country first...</option>
                       </select>
                    </div>


<!--Inside my script -->
<script>
 $('#Country').change(function () {
        var selectedValue = $(this).val();
        $.ajax({
            url: '@Url.Action("CityDropDownList", "Home")',
            type: "GET",
            data: { country: selectedValue },
            success: function (result) {

                var cityDropDownList = $('#City');
                cityDropDownList.empty();
                $.each(result, function () {
                    cityDropDownList.append(
                        $('<option/>', {
                            value: this.Value,
                            text: this.Text
                        })
                    );
                });
            }
        });
    });
</script>

控制器

 public JsonResult CityDropDownList(string country)
    {
        var results = (from c in db.PageStats
                       where c.Country.Equals(country)
                       orderby c.City
                       select c.City).ToList().Distinct();

            //db.PageStats.Where(x => x.Country.Equals(country)).OrderBy(x => x.City).Select(x => x.City).Distinct().ToList();

        List<SelectListItem> cities = new List<SelectListItem>();

        foreach(var item in results)
        {
            SelectListItem city = new SelectListItem
            {
                Text = item,
                Value = item
            };
            cities.Add(city);
        }             
        return Json(cityList, JsonRequestBehavior.AllowGet);
    }

【问题讨论】：

它返回什么字符串值？您是说返回单个字符串而不是数组吗？
对于 90% 的成功案例，它返回 1 个或多个 [object Object]。对于 10% 的人，它将每个城市都列在一个巨大的字符串中。我添加了警报（结果）；在success(){之后进行调试。
听起来很奇怪！你的代码看起来不错。我建议将您的更改事件注册放在 document.ready 事件中。
不相关，但创建和返回List<SelectListItem> 没有意义（客户不知道SelectListItem 是什么）。由于结果是IEnumerable<string>，那么只需返回return Json(results, JsonRequestBehavior.AllowGet); 并使用value: this, text: this
Shyju - 是的，它被注入到共享布局中的 document.ready 中。斯蒂芬 - 好点，谢谢。 @AllElse - 什么可能导致我的问题？

标签： jquery json ajax asp.net-mvc

【解决方案1】：

已解决

$('#Country').change(function () {
    var selectedValue = $(this).val();
    $.get({
        url: '@Url.Action("CityDropDownList", "Home")',
        data: { country: selectedValue },

        success: function (result) {

            alert(result);
            var cities = $('#City');
            cities.empty();

            $.each(result, function () {

                cities.append(
                        $('<option>', {
                            value: this.Value
                        }).text(this.Text)
                    );
            });
        }
    });
});

【讨论】：