SelectList
The SelectList
component allows you to select a value from a list of predefined items.
Installation
The SelectList extension is part of the
Blazorise.Components
NuGet package.
NuGet
Install extension from NuGet.Install-Package Blazorise.Components
Example
<SelectList TItem="MySelectModel" TValue="int" Data="" TextField="@((item)=>item.MyTextField)" ValueField="@((item)=>item.MyValueField)" SelectedValue="" SelectedValueChanged="" DefaultItemText="Choose your country" />
@code{ public class MySelectModel { public int MyValueField { get; set; } public string MyTextField { get; set; } } static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" }; IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } ); int selectedListValue { get; set; } = 3; void MyListValueChangedHandler( int newValue ) { selectedListValue = newValue; StateHasChanged(); } }
Attributes
Name | Description | Type | Default |
---|---|---|---|
TItem |
Model data type. | generic |
|
TValue |
Bound value data type. | generic |
|
Data |
Data used for the search. | IEnumerable<TItem> |
|
TextField |
Selector for the display name field. | Func<TItem, string> |
|
ValueField |
Selector for the value field. | Func<TItem, TValue> |
|
SelectedValue |
Currently selected value. | TValue |
|
SelectedValueChanged |
Raises an event after the selected value has changed. | EventCallback<TValue> |
|
Multiple |
Specifies that multiple items can be selected. | bool |
false |
MaxVisibleItems |
Specifies how many options should be shown at once. | int? |
null |
DefaultItemText |
Display text of the default select item. | string |
null |
DefaultItemValue |
Value of the default select item. | TValue |
default |
DefaultItemDisabled |
If true, hides the default item. | bool |
false |
DefaultItemHidden |
If true, hides the default item. | bool |
false |