<div class="row" >
 <div class="col-md-4">
 <select aria-label="Select a Impact Level"
 data-control="select2"
 data-placeholder="Select an Impact Level..."
 class="form-select form-select-solid form-select-lg fw-semibold select2-hidden-accessible" onchange="@CountryClicked">
 <option value="">-- Select Country --</option>
 @foreach (var country in ProcessImpactTypes)
 {
 <option value="@country.ProcessImpactTypeId">@country.ProcessImpactTypeName</option>
 }
 </select>
 </div>
 <div class="col-md-4">
 <select aria-label="Select a Impact Level"
 data-control="select2"
 data-placeholder="Select an Impact Level..."
 class="form-select form-select-solid form-select-lg fw-semibold " onchange="@CityClicked">
 <option value="">-- Select City --</option>
 @if (ImpactLevelMasters != null)
 {
 @foreach (var city in ImpactLevelMasters)
 {
 <option value="@city.ImpactLevelMasterId">@(city.Level + "|"+ city.LevelValue)</option>
 }
 }
 </select>
 </div>
 </div>

protected async void CountryClicked(ChangeEventArgs countryEvent)
 {
 int value = Convert.ToUInt16(countryEvent.Value);
 ImpactLevelMasters = await ProcessImpactBizServices.GetProcessImpactLevelByProcessImpactTypeId(value, ClientId);
 EditImpactType.ProcessImpactTypeId = value;
 StateHasChanged();
 //cityList.Clear();
 //cityName = string.Empty;

 //countryId = countryEvent.Value.ToString();
 //countryName = countryList.FirstOrDefault(s => s.CountryId == countryId).CountryName;


 this.StateHasChanged();
 }

 void CityClicked(ChangeEventArgs cityEvent)
 {
 //cityName = cityEvent.Value.ToString();
 this.StateHasChanged();
 }