Populate One Dropdown on selection of other -MVC - ajax

Question

I am trying to populate one dropdown list based on the selection of other dropdown list. This is what I have till now.
My Controller:
[HttpPost]
public JsonResult LoadReasonsByCategory(string resId)
{
var queryy = from item in db.T_SD_CD_GROUP
where resId.Contains(item.SCG_CD_TYPE)
select new
{
item.SCG_CD_TYPE,
item.SCG_CD_DESC
};
var ObjList = new List<SelectListItem>();
foreach (var item in queryy)
{
ObjList.Add(new SelectListItem() { Text = item.SCG_CD_DESC.ToString(), Value = (item.SCG_CD_TYPE) });
}
return Json(ObjList, JsonRequestBehavior.AllowGet);
}
JS
$("#ddlReasonCategory").on('change', function () {
var item = $(this).find("option:selected");
var value = $("#ddlReasonCategory").val(); //get the selected option value
//var text = item.html(); //get the selected option text
//alert(item.val());
$.ajax({
url: '/CRActual/LoadReasonsByCategory',
type: 'POST',
datatype: 'application/json',
contentType: 'application/json',
data: JSON.stringify({ resId: value}),
success: function (data) {
alert("sUccess");
$("#ddlReasonType").html("");
ddlReasonType.append($('<option></option>').val("").html("Please select a City"));
for (var i = 0; i < data.length; i++) {
ddlReasonType.append($('<option></option>').val(data[i].Text).html(data[i].Text));
}
},
error: function () {
alert("Fail")
},
});
View:
#Html.DropDownList("ddlReasonCategory", (IEnumerable<SelectListItem>)ViewBag.ddlReasonCategory, new { #class = "chosen-select col-md-3", #data_placeholder = "Please select" })
#Html.DropDownList("ddlReasonType", new SelectList(string.Empty, "Value", "Text"), "Please select a Reason", new { #class = "chosen-select col-md-3", #data_placeholder = "Please select" })
The codes runs absolutely without any errors, but the second drop down binding fails. Where am I going Wrong?

Answer 1

If your LoadReasonsByCategory method returns data correctly then write the success function code in the Ajax as follows:
success: function (data) {
var ddlResonTypeSelector = $("#ddlReasonType");
ddlResonTypeSelector.empty();
if (data.length > 0) {
ddlResonTypeSelector.append($("<option>").val("").text("Please select a Reason Type"));
$(data).each(function(index, item) {
ddlResonTypeSelector.append($("<option>").val(item.value).text(item.text));
});
} else {
ddlResonTypeSelector.append($("<option>").val("").text("Reason Type List is empty!"));
}
},