Check this one
View Part :-
$("#istateid").change(function () {
$.ajax({
type: "POST",
url: "/PostAd/getCityJson",
data: { stateId: $("#istateid > option:selected").attr("value") },
success: function (data) {
var items = [];
items.push("<option>--Choose Your Area--</option>");
$.each(data, function () {
items.push("<option value=" + this.Value + ">" + this.Text + "</option>");
});
$("#icityid").html(items.join(' '));
}
})
});
Controller Part -
[HttpPost]
public JsonResult getCityJson(string stateId, string selectCityId=null)
{
return Json(getCity(stateId, selectCityId));
}
public SelectList getCity(string stateId, string selectCityId = null)
{
IEnumerable<SelectListItem> cityList = new List<SelectListItem>();
if (!string.IsNullOrEmpty(stateId))
{
int _stateId = Convert.ToInt32(stateId);
cityList = (from m in _db.mstrcities where m.bstatus == true && m.istateid == _stateId select m).AsEnumerable().Select(m => new SelectListItem() { Text = m.vcity, Value = m.icityid.ToString() });
}
return new SelectList(cityList, "Value", "Text", selectCityId);
}
View more about it how to bind through viewbag / model / jquery, more example -
binding dropdownlist in .net mvc razor by viewbag, model and jquery selected index change - three ways