Blazor onchange event with select dropdown

Your answer should be in the cshtml:

<select @onchange="DoStuff">  //pre-3.0 versions: onchange=@DoStuff
    @foreach (var template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

Then your @functions (in razor components @code instead. See: Razor Syntax: Functions) should look like:

@functions {  //use @code in razor components.
    List<string> templates = new List<string>() { "Maui", "Hawaii", "Niihau", "Kauai", "Kahoolawe" };
    string SelectedString = "Maui";

    void DoStuff(ChangeEventArgs e)
    {
        SelectedString = e.Value.ToString();
        Console.WriteLine("It is definitely: " + SelectedString);
    }
}

You could also just use a bind...

<select @bind="SelectedString"> //pre 3.0 bind="@SelectedString"

but @onchange="DoStuff" allows you to perform logic on selection.

Here's a link to some changes: Blazor WebAssembly 3.2.0 Preview 5 release now available

Above answer didn't work for me, got compilation error.

below is my working code.

@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}

As an alternative to setting an onchange event, you could just bind the dropdown to a property and handle changes in the property set. This way you get the value being selected all in the same process and without having to convert an object value. Plus if you're already using @bind on the select, you are prevented from using onchange on it as well.

<select @bind="BoundID">
 ...
</select>

@code {
  private int? _boundID = null;
  private int? BoundID
  {
    get
    {
      return _boundID;
    }
    set
    {
      _boundID = value;
     //run your process here to handle dropdown changes
    }
  }
}