How to populate dropdown list base on another? - asp.net-mvc

Question

View:
<div class="form-group">
<label for="country" class="control-label col-lg-5">#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("COUNTRY")):#Html.ValidationMessageFor(m => m.Register.SelectCountryId, null, new { #class = "required" })</label>
<div class="col-lg-7">
#Html.DropDownListFor(m => m.Register.SelectCountryId, Model.Register.Country, "Select country", new { id = "country", #class = "form-control" })
</div>
</div>
<!-- Region-->
<div class="form-group">
<label for="region" class="control-label col-lg-5">#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("REGION")):#Html.ValidationMessageFor(m => m.Register.SelectRegionId, null, new { #class = "required" })</label>
<div class="col-lg-7">
#Html.DropDownListFor(m => m.Register.SelectRegionId, Model.Register.Region, "Select region", new { id = "region", #class = "form-control" })
</div>
</div>
<!-- City-->
<div class="form-group">
<label for="region" class="control-label col-lg-5">#Html.Label(#BetXOnline.TranslationProvider.Instance.GetTranslationMessage("CITY")):#Html.ValidationMessageFor(m => m.Register.SelectCityId, null, new { #class = "required" })</label>
<div class="col-lg-7">
#Html.DropDownListFor(m => m.Register.SelectCityId, Model.Register.City, "Select region", new { id = "region", #class = "form-control" })
</div>
</div>
Controller:
model.Register.Country = new SelectList(manager.GetCountries(), "Id", "Name");
model.Register.Region = new SelectList(manager.GetRegions(model.Register.SelectCountryId), "Id", "Name");
model.Register.WebTypeOfLicense = new SelectList(CommonDbService.GetAllLicense(), "Id", "Name");
model.Register.City = new SelectList(manager.GetCities(model.Register.SelectRegionId), "Id", "Name");
Function:
IEnumerable<ICountry> GetAllCountries();
ICountry GetCountry(int countryId);
IEnumerable<IRegion> GetRegions(int countryId);
IRegion GetRegion(int regionId);
IEnumerable<ICity> GetCities(int regionId);
ICity GetCity(int cityId);
Main idea is when i select country to get state and when i click on state to get cities...State recives id of country so i need to populate state with id of country to get states and then cites recive id of state to populate cities

Answer 1

You need some javascript function that will fire on dropdown change event and bring the respective child element of selected parent in dropdown. once you receive response fill the child dropdown with latest value you have.
one of simple example : sample