Blazor下拉列表选项变更时绑定值异常问题求助

问题场景 #

三个下拉列表通过@bind分别绑定selectedValue1、selectedValue2、selectedValue3，每个下拉仅展示未被其他下拉选中的选项。操作流程：

1. 依次选择Bob、Gertrude、Giles
2. 将第三个下拉改为Geoff后，第二个下拉的UI显示自动变更，但Gertrude仍在其可选选项中，且后端绑定的字符串值完全正确。

问题代码 #

@page "/"
@using BlazorApp1.Data;

<select @bind="selectedValue1">
    @foreach (DropdownOption option in notValue(0))
    {
        <option value="@option.value" aria-label="@option"> @option.displayName </option>
    }
</select>

<select @bind="selectedValue2">
    @foreach (DropdownOption option in notValue(1))
    {
        <option value="@option.value" aria-label="@option"> @option.displayName </option>
    }
</select>

<select @bind="selectedValue3">
    @foreach (DropdownOption option in notValue(2))
    {
        <option value="@option.value" aria-label="@option"> @option.displayName </option>
    }
</select>

@code {
    List<DropdownOption> test = new List<DropdownOption>()
    {
        new("BOB", "BOB"),
        new("GEOFF", "GEOFF"),
        new("GREGROY", "GREGORY"),
        new("GERTRUDE", "GERTRUDE"),
        new("NameyMcNameFace", "NameyMcNameFace"),
        new("GILES", "GILES")
    };

    List<DropdownOption> notValue(int index) => GetValues(index);

    string selectedValue1;
    string selectedValue2;
    string selectedValue3;

    private List<DropdownOption> GetValues(int index)
    {
        var selected = new List<string>() { selectedValue1, selectedValue2, selectedValue3 };
        selected = selected.Select((x, i) => i == index ? "" : x).ToList();
        return test.Where(x => !selected.Contains(x.value)).ToList();
    }

    //public readonly record struct DropdownOption(string value, string displayName, string? group = null)
    //{
    //}
}

原因分析 #

这个问题是Blazor渲染机制与原生HTML select元素行为的冲突导致的：

1. 当修改第三个下拉选择Geoff后，Blazor触发组件重新渲染，GetValues(1)会重新计算第二个下拉的可选选项——此时排除的是Bob和Geoff，Gertrude确实在可选列表中，后端逻辑完全正确。
2. 但原生HTML的<select>有个特性：如果当前选中的value不在渲染后的<option>集合中，浏览器会自动将选中值重置为列表的第一个选项。
3. 问题出在渲染顺序和状态同步的时间差：Blazor在重新渲染第二个下拉的选项列表时，浏览器可能在Blazor完成后端状态同步前，先检测当前选中值（Gertrude）是否存在于新选项列表中。由于动态生成选项的过程是批量的，浏览器短暂认为选中值对应的选项不存在，触发了自动重置；之后Blazor再将后端正确的selectedValue2同步到UI，就造成了视觉上的“自动变更”假象。

解决方案 #

方案1：手动绑定替代@bind #

放弃使用@bind，手动控制选中状态和变更事件，确保状态同步的顺序：

<select value="@selectedValue2" @onchange="(e) => { selectedValue2 = e.Value.ToString(); StateHasChanged(); }">
    @foreach (DropdownOption option in notValue(1))
    {
        <option value="@option.value">@option.displayName</option>
    }
</select>

这种方式可以强制在选中值变更后立即触发渲染，让浏览器能准确识别到选中值对应的选项。

方案2：确保选中值始终在可选列表中 #

在GetValues方法中，额外判断如果当前选中值不在过滤后的列表中，就强制将其加入（虽然你的场景中不会出现，但可以避免浏览器自动重置）：

private List<DropdownOption> GetValues(int index)
{
    var selected = new List<string>() { selectedValue1, selectedValue2, selectedValue3 };
    selected = selected.Select((x, i) => i == index ? "" : x).ToList();
    var filtered = test.Where(x => !selected.Contains(x.value)).ToList();
    
    // 手动保留当前选中值对应的选项
    var currentValue = index switch
    {
        0 => selectedValue1,
        1 => selectedValue2,
        2 => selectedValue3,
        _ => null
    };
    
    if (!string.IsNullOrEmpty(currentValue) && !filtered.Any(x => x.value == currentValue))
    {
        var currentOption = test.FirstOrDefault(x => x.value == currentValue);
        if (currentOption != null) filtered.Add(currentOption);
    }
    
    return filtered;
}

操作截图说明 #

• 初始状态：三个下拉分别选中Bob、Gertrude、Giles
• 变更后：第三个下拉改为Geoff，第二个下拉UI短暂显示其他选项，但后端绑定值仍为Gertrude

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