Cascading Dropdown Error ASP.Net Core 2.0

Question

I am trying to create a cascading dropdown for City based on the Province using jQuery but I keep receiving the error:

Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR

My Javascript is firing.

$(function () {
    $('#provinceList').change(function () {
        var url = '@Url.Content("~/")' + "Cities/GetCityByProvince";
        var ddlSource = "#provinceList";
        $.getJSON(url, { provID: $(ddlSource).val() }, function () {
            $("#cityList").append("<option value=1> Hi + </option>")
            // });
            //$("#cityList").html(items);
        })
    });
});

And the return object from my class is populated correctly

public ActionResult GetCityByProvince(int provID)
{
    List<City> cities = new List<City>();
    cities = _context.Cities.Where(m => m.ProvinceId == provID).ToList();
    cities.Insert(0, new City { ID = 0, CityName = "Please select your nearest city" });
    var x = Json(new SelectList(cities, "Id", "CityName"));
    return Json(x);
}

However I am still getting this error.

Answer 1

You can use this solution. And try another browser.

jQuery(function ($) {
            $('select').on('change', function () {
                if ($(this).attr('data-parent') != null) {
                    var parent = $(this).attr('data-parent').replace(".", "\\\\.");
                    if (parent != null && param != undefined) {
                        var data = $.extend(
                        {
                            render: $(this).attr('data-parent'),
                            url: $(parent).attr('data-url'),
                            type: "get",
                            dataType: "html",
                            data:
                                    {
                                        "value": ($(this).val() == $(this).attr('data-master') ? null : $(this).val())
                                    }
                        }, data);
                        FromJson(data);
                        if ($(this).val() != "-Select-") {
                            $(parent).show();
                        }
                        else {
                            $(parent).hide();
                        }
                    }
                }
            });
        });


function FromJson(param) {

    $.ajax({
        url: param.url,
        type: 'GET',
        data: param.data,
        dataType: 'json',
        async: true,
        success: function (data) {
            var options = $(param.render);
            $(param.render).empty();
            options.append($('<option value=""/>').text("-Select-"));
            if (data.length > 0) {
                $.each(data, function () {
                    if (param.dataText == null) {
                        options.append($('<option />').val(this.Value).text(this.Text));
                    }
                    else {
                        options.append($('<option />').val(this.Value).text(this.str));
                    }
                });
            }
            else {
                options.append($('<option />').text("-Error-"));
            }

            if (param.selected != null && param.selected != 0) {
                $(param.render).val(param.selected);
            }
        }
    });
}

Then;

<select data-parent="#state" id="city" name="city" class="form-control valid" data-url="/Json/city" data-type="live">
</select>

<select data-parent="#town" id="state" name="state" class="form-control valid"  data-url="/Json/state">
</select>

<select data-parent="#zip" id="town" name="town" class="form-control valid"  data-url="/Json/town">
</select>

<select id="zip" name="zip" class="form-control valid"  data-url="/Json/zip">
</select>