Bind city dropdown on selection of country dropdownlist

Controller Action Method

public void FillCountryDropDown(dynamic Viewbag, string SelectVal)

{ 

             var Country = (from c in _db.CountryMasters select c);
             ViewBag.Country = new SelectList(Country, "CountryId", "CountryName", SelectVal);

}

public JsonResult GetCity(int CountryId)

 {
           var City = (from c in _db.CityMasters where c.CountryId == CountryId select c);
           return Json(new SelectList(City.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
 } 

View Page

Script 

--------Script------
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

--------Script End------

Javascript

-------Javascript----------

<script language="javascript" type="text/javascript">

var createuser = jQuery.noConflict();
        createuser(function () {
            createuser("#CountryId").change(function () {
                var selectedItem = createuser(this).val();
                var ddlCities = createuser("#CityId");
                if (selectedItem.toString().length > 0 && parseInt(selectedItem) > 0) {
                    createuser.ajax({
                        cache: false,
                        type: "GET",
                        url: '@Url.Action("GetCity", "Employee")',
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: { "CountryId": selectedItem },
                        success: function (data) {
                            ddlCities.html('');
                            createuser.each(data, function (id, option) {
                                ddlCities.append(createuser('<option></option>').val(option.Value).html(option.Text));
                            });
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Failed to retrieve City.');
                        }
                    });
                }
                else {
                    ddlCities.html('');
                    ddlCities.append(createuser('<option></option>').val('').html('--Select City--'));
                }
            });
        });

</script>

 -------Javascript end----------

@using (Html.BeginForm("Add", "Employee", FormMethod.Post, new { id = "AddEmp" }))
{  

       <div>
               Country:
       </div>
        <div>

               @Html.DropDownList("CountryId", ViewBag.Country as SelectList, "--SelectCountry--")
        </div>

        <div>
                City:
        </div>
        <div>
               <select id="CityId" name = "CityId">
               </select>
        </div>

}

Note : In CountryDropDownList the name (here it is "CountryId") should be the name of the property in your model. and as city dropdown is getting bind according to country selection so we take <select> to bind city there give id and name with property of your model for city.(whatever is the name in your model for Country and city ids.)