<PrimerSelect @bind-Value="selectedOption" Size="SelectSize.Small">
<PrimerSelectOption value="">Please select</PrimerSelectOption>
<PrimerSelectOption value="one">Choice one</PrimerSelectOption>
<PrimerSelectOption value="two">Choice two</PrimerSelectOption>
<PrimerSelectOption value="three">Choice three</PrimerSelectOption>
<PrimerSelectOption value="four">Choice four</PrimerSelectOption>
<PrimerSelectOption value="five">Choice five</PrimerSelectOption>
</PrimerSelect>
<PrimerSelectGroup Size="SelectSize.Small">
<PrimerSelectGroupItem Level="0" Options="@ContinentOptions" Value="@SelectedContinent" ValueChanged="@OnContinentChanged" />
<PrimerSelectGroupItem Level="1" Options="@CountryOptions" @bind-Value="SelectedCountry" />
<PrimerSelectGroupItem Level="2" Options="@GetCities(SelectedCountry)" @bind-Value="SelectedCity" />
</PrimerSelectGroup>
Available options for Select component
Name | Description | Default Value | CSS Class |
---|---|---|---|
Value | Selected option value | - | - |
Disabled | Disable the select | false | - |
Size | Size of the select (Small, Medium, Large) | Medium | - |
ClassName | Additional custom classes | - | - |
private string selectedOption = "";
private List<SelectOption> ContinentOptions = new()
{
new() { Value = "asia", Text = "Asia" },
new() { Value = "europe", Text = "Europe" }
};
private string SelectedContinent;
private string SelectedCountry;
private string SelectedCity;
private List<SelectOption> GetCountries(string continent)
{
return continent switch
{
"asia" => new() { new("kr", "Korea"), new("jp", "Japan") },
"europe" => new() { new("fr", "France"), new("de", "Germany") },
_ => new()
};
}
private List<SelectOption> GetCities(string country)
{
return country switch
{
"kr" => new() { new("seoul", "Seoul"), new("busan", "Busan") },
"jp" => new() { new("tokyo", "Tokyo"), new("osaka", "Osaka") },
"fr" => new() { new("paris", "Paris"), new("lyon", "Lyon") },
"de" => new() { new("berlin", "Berlin"), new("munich", "Munich") },
_ => new()
};
}
private List<SelectOption> CountryOptions = new();
private async Task OnContinentChanged(string newValue)
{
SelectedContinent = newValue;
SelectedCountry = null;
SelectedCity = null;
CountryOptions = await LoadCountriesAsync(newValue);
StateHasChanged();
}
private async Task<List<SelectOption>> LoadCountriesAsync(string continent)
{
await Task.Delay(300);
return GetCountries(continent);
}