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="@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`