Blazor中选择选项后如何稳定重置Select控件至默认状态？

核心问题原因 #

1. 绑定与硬编码选中状态冲突：你给空选项加了selected属性，但同时用value="@appId"控制选中状态，二者优先级冲突，Blazor绑定会覆盖硬编码设置。当移除选中的选项后，浏览器会自动选中第一个可用选项，导致无法回到初始状态。
2. 数据源不一致：下拉框循环遍历的是model.Applications，但事件方法中修改的是vm.Applications，这会导致下拉框的选项没有同步移除，浏览器同样会自动选中下一个存在的选项。
3. DOM更新时机滞后：修改集合和appId后，组件渲染可能存在延迟，浏览器的默认选中行为会抢先触发。

修正步骤与代码示例 #

1. 统一数据源并移除硬编码的selected

下拉框的选项要和你操作的数据源保持一致，同时移除空选项的selected属性，让appId完全控制选中状态：

<select class="select" value="@appId" @onchange="PickApplication">
    <option value="">Choose...</option>
    @foreach (var app in vm.Applications.OrderBy(x => x.ApplicationId))
    {
        <option value="@app.ApplicationId.ToString()">@app.Name</option>
    }
</select>

2. 优化事件处理方法

确保移除选项后，appId被重置为空，并强制组件立即重新渲染，避免浏览器自动选中下一个选项：

private void PickApplication(ChangeEventArgs e)
{
    if (e.Value is null || string.IsNullOrEmpty(e.Value.ToString()))
    {
        return;
    }

    int id = int.Parse(e.Value.ToString()!);
    var app = vm.Applications.FirstOrDefault(x => x.ApplicationId == id);
    
    if (app != null)
    {
        ChosenApplications.Add(app);
        vm.Applications.Remove(app);
        appId = "";
        // 强制组件重新渲染，确保下拉框选中空选项
        StateHasChanged();
    }
}

额外简化方案 #

如果想简化代码，可以使用Blazor的双向绑定@bind-value="@appId"，省去手动处理appId赋值的步骤：

<select class="select" @bind-value="@appId" @bind-value:after="PickApplication">
    <option value="">Choose...</option>
    @foreach (var app in vm.Applications.OrderBy(x => x.ApplicationId))
    {
        <option value="@app.ApplicationId.ToString()">@app.Name</option>
    }
</select>

对应的方法可简化为：

private void PickApplication()
{
    if (string.IsNullOrEmpty(appId))
    {
        return;
    }

    int id = int.Parse(appId);
    var app = vm.Applications.FirstOrDefault(x => x.ApplicationId == id);
    
    if (app != null)
    {
        ChosenApplications.Add(app);
        vm.Applications.Remove(app);
        appId = "";
        StateHasChanged();
    }
}

内容的提问来源于stack exchange，提问作者Zerthz