In the cascading DropDown menu, the value of first DropDown list depends on the value of the second DropDownList. In the following example, a country is selected from the countries dropdown menu, and respective states will be loaded in the state dropdown menu.
<EditForm Model="@model">
<label>Country: </label>
<InputSelect @bind-Value="@model.Country">
<option value="1">Australia</option>
<option value="2">United States</option>
</InputSelect>
<label> State: </label>
<InputSelect @bind-Value="@model.State">
@if (model.Country == "1" || model.Country == null)
{
<option value="101">New York</option>
<option value="102">Virginia</option>
<option value="103">Washington</option>
}
else if (model.Country == "2")
{
<option value="104">Queensland</option>
<option value="105">Tasmania</option>
<option value="106">Victoria</option>
}
</InputSelect>
</EditForm>
@code {
public Models model = new Models();
public class Models
{
public string Country { get; set; }
public string State { get; set; }
}
}
Share with