SelectList

The SelectList component allows you to select a value from a list of predefined items.

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.Components

Example

<SelectList TItem="MySelectModel"
            TValue="int"
            Data="@myDdlData"
            TextField="@((item)=>item.MyTextField)"
            ValueField="@((item)=>item.MyValueField)"
            SelectedValue="@selectedListValue"
            SelectedValueChanged="@MyListValueChangedHandler"
            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>
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