Ajax call to populate select list when another select list changes

Following on from this post, I'm attempting to populate a select list of 'cities' when another select list of 'countries' changes. I followed the same approach as the linked post and as outlined below implementing Darin's suggestion for the success(). It works great 'most' of the time (which is really odd). What I mean is, out of all my 'countries', 90% of the change events return the select list item(s) object(s), the other 10% return a single string value. Why would it vary? It should either work or not...

View

<!--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>

Controller

 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);
    }

Answers 1

  • SOLVED

    $('#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)
                        );
                });
            }
        });
    });
    

Related Articles