Error loading cascading dropdownlist

Question

I am trying to load a dropdownlist cities according to the selected state and am encountering an error. I managed to carry out the operation in a template I downloaded from the internet, but I’m not getting in my project.

The code is below:
The JS code to make the call.

<script type="text/javascript">
    $(function () {
        $("#ID_ESTADO").change(function () {
            var selectedItem = $(this).val();
            var ddlCidades = $("#ID_CIDADE");
            var statesProgress = $("#states-loading-progress");
            statesProgress.show();
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.RouteUrl("getCidades"))",
                data: { "ID_ESTADO": selectedItem },
                success: function (data) {
                    ddlCidades.html('');
                    $.each(data, function (ID_CIDADE, option) {
                        ddlCidades.append($('<option></option>').val(option.ID_CIDADE).html(option.NOME));
                    });
                    statesProgress.hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                    statesProgress.hide();
                }
            });
        });
    });
</script>

The dropdownlists:

<div class="form-group">
    @Html.LabelFor(model => model.ESTADO.NOME, "ESTADO")
    @Html.DropDownListFor(model => model.ID_ESTADO, new SelectList(Model.lstEstados, "ID_ESTADO", "NOME").OrderBy(p => p.Text), "", htmlAttributes: new { @id = "ID_ESTADO", @name = "ID_ESTADO", @class = "form-control" })
    @Html.ValidationMessageFor(model => model.ID_ESTADO, "", htmlAttributes: new { @style = "color: red;" })
</div>

<div class="form-group">
    @Html.LabelFor(model => model.CIDADE.NOME, "CIDADE")
    @Html.DropDownListFor(model => model.ID_CIDADE, new SelectList(Model.lstCidades, "ID_CIDADE", "NOME").OrderBy(p => p.Text), htmlAttributes: new { @id = "ID_CIDADE", @name = "ID_CIDADE", @class = "form-control" })
    @Html.ValidationMessageFor(model => model.ID_CIDADE, "", htmlAttributes: new { @style = "color: red;" })
    <span id="states-loading-progress" style="display: none;">Por favor aguarde..</span>
</div>

And the Action that is being executed:

[AcceptVerbs(HttpVerbs.Get)]
    public ActionResult getCidades(string ID_ESTADO)
    {
        int id = 0;
        bool isValid = Int32.TryParse(ID_ESTADO, out id);
        var result = db.CIDADEs.Where(p => p.ID_ESTADO == id).ToList();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

The JS code is running, Action is being called and the list is loaded normally. The problem is at the time of loading the CITY dropdown.