How to implement a cascading dropdown menu using InputSelect in Blazor?

Platform: Blazor| Category: Forms and validation

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

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.