Blazor动态下拉框删除项后如何重置为默认选中值？

这个问题的核心是删除选项后，浏览器会自动填补选中状态，但你的SelectedValue没有同步重置，导致显示值和绑定值不一致。下面是具体的解决步骤和代码修改：

1. 关键修复：删除后手动重置选中值 #

在你执行删除选中项的方法里，移除项之后一定要把SelectedValue重置为空字符串，这样Blazor重新渲染下拉框时，会匹配默认的空值选项。

假设你的删除方法是这样的，修改后：

public void DeleteSelectedItem()
{
    // 找到要删除的项
    var itemToRemove = itm.FirstOrDefault(x => x.Id.ToString() == SelectedValue);
    if (itemToRemove != null)
    {
        itm.Remove(itemToRemove);
    }
    // 核心：重置选中状态为默认值
    SelectedValue = "";
}

2. 优化下拉框绑定（可选但推荐） #

原来的代码只用了@onchange来更新SelectedValue，但没有把下拉框的选中状态和SelectedValue双向绑定。建议改用Blazor的@bind语法，这样选中状态和变量会自动同步，不需要手动处理onchange：

修改后的Razor代码：

<select class="form-control" @bind="SelectedValue">
    <option value="">select one</option>
    @foreach (var mod in itm)
    {
        <option value="@mod.Id">@mod.Name</option>
    }
</select>

这样你甚至可以删掉原来的selectedValue方法，因为@bind已经自动处理了值的同步。

为什么之前会出问题？ #

当你删除选中的选项后：

• 原来的SelectedValue还是被删除项的ID，但DOM里已经没有这个选项了
• 浏览器会自动选中第一个可用的选项（也就是被删项的下一个），但这个操作不会触发@onchange事件
• 最终就出现了显示值和SelectedValue不一致的情况

通过手动重置SelectedValue为空，Blazor重新渲染时会精准匹配<option value="">select one</option>，让下拉框回到默认状态，同时保证变量和显示一致。

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