how to ajax call change event on dropdown in mvc

Question

I trying to bind dropdown value from ZoneMaster To StateMaster but failed to bind value plz help me to solve.

 

view code:-

<label class="control-label col-sm-2">Zone<span class="mandatory"></span>:</label>
@Html.DropDownList("ZoneMaster", null, "---Select Zone----")
<br />
<br />
<label class="control-label col-sm-2">State<span class="mandatory"></span>:</label>
<select id="StateMaster" class="form-control input-md" ></select>
<br />
<br />
<label class="control-label col-sm-2">Branch<span class="mandatory"></span>:</label>
<select id="BranchMaster" class="form-control input-md" ></select>
<script>
$(document).ready(function () {
$("#ZoneMaster").change(function () {
var id = $(this).val();
$("#StateMaster").empty();
$.get("StateMaster_Bind", { ZoneName: ZoneMaster }, function (data) {
var v = "<option>---Select---</option>";
$.each(data, function (i, v1) {
v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
});
$("#StateMaster").html(v);
});
});
$("#StateMaster").change(function () {
var id = $(this).val();
$("#BranchMaster").empty();
$.get("BranchMaster_Bind", { StateCode: StateMaster}, function (data) {
var v = "<option>---Select---</option>";
$.each(data, function (i, v1) {
v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
});
$("#BranchMaster").html(v);
});
});
});
</script>

ModelCode:-

public class CreateUserView
{
public string Code { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int Role { get; set; }
public string EmailID { get; set; }
public int MobileNo { get; set; }
public string ZoneMaster { get; set; }
public string StateMaster { get; set; }
public string BranchMaster { get; set; }
public string CompanyType { get; set; }
}

ControllerCode:-

public void ZoneMaster_Bind()
{
DataSet ds = dblayer.Get_Zone();
List<SelectListItem> ZoneMasterlist = new List<SelectListItem>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
ZoneMasterlist.Add(new SelectListItem { Text = dr["ZoneName"].ToString(), Value = dr["ZoneName"].ToString() });
}
ViewBag.ZoneMaster = ZoneMasterlist;
}
public JsonResult StateMaster_Bind(string ZoneCode)
{
DataSet ds = dblayer.Get_State(ZoneCode);
List<SelectListItem> StateMasterlist = new List<SelectListItem>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
StateMasterlist.Add(new SelectListItem { Text = dr["State"].ToString(), Value = dr["StateCode"].ToString() });
}
return Json(StateMasterlist, JsonRequestBehavior.AllowGet);
}
public JsonResult BranchMaster_Bind(string StateCode)
{
DataSet ds = dblayer.Get_Branch(StateCode);
List<SelectListItem> BranchMasterList = new List<SelectListItem>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
BranchMasterList.Add(new SelectListItem { Text = dr["Branch"].ToString(), Value = dr["BranchCode"].ToString() });
}
return Json(BranchMasterList, JsonRequestBehavior.AllowGet);
}