I am trying to load a cities dropdownlist according to the selected state and am encountering an error. I managed to perform the operation on a template that I downloaded from the internet, but I'm not getting it in my project.
Thecodeisbelow:
TheJScodetomakethecall.
<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>