Blazor中一个select选择框变更时如何重置另一选择框为默认值

你这套代码出现选中项错位，本质是几个实现疏漏：

• 两个下拉框都没做值绑定，Blazor 跟踪不到 select 的选中状态，替换 option 列表时浏览器会默认保留上一次的选中索引，直接套到新列表上，就会出现切换部门后自动选中同位置机组项的问题
• 部门切换的回调里，你没有把新选中的部门值存到selectedString_dep变量里，拼接机组 csv 路径时用的还是旧值，本身就存在读错文件的隐患
• 切换部门时只清空了机组的选项列表，没有重置机组选择框的选中值，状态残留自然不会回到默认占位项
• 额外提个编码问题：把代码拆分到@code和@functions两个块完全没必要，Blazor 编译时这两个块逻辑完全一致，分散存放反而容易搞混变量作用域；另外async void的事件写法会吞掉运行时异常，出问题很难排查，建议换成async Task。

按下面逻辑修改即可实现切换部门时自动重置机组选择框到占位项：

1. 给两个 select 都显式绑定@value到对应选中变量，让 Blazor 接管选中状态的同步
2. 部门选中值变化时，首先更新部门选中变量，清空机组选项列表的同时，直接将机组选中值设为空字符串，绑定机制会自动选中 value 为空的默认占位选项
3. 修正机组文件路径的取值逻辑，用新选中的部门值拼接路径，不要用缓存的旧值

@page "/connect"
@using System.IO

<select class="Dep" @bind="selectedString_dep" @bind:after="LoadMachineGroups">
    <option value="">-- Select Department --</option>
    @foreach (var dept in templates_dep)
    {
        <option value="@dept">@dept</option>
    }
</select>

<select class="MG" @bind="selectedString_MG">
    <option value="">-- Select Machine Group --</option>
    @foreach (var mgt in templates_MG)
    {
        <option value="@mgt">@mgt</option>
    }
</select>

@code{
    private List<string> templates_dep = new List<string>();
    private string selectedString_dep;
    private List<string> templates_MG = new List<string>();
    private string selectedString_MG;

    protected override async Task OnInitializedAsync()
    {
        templates_dep.Clear();    
        ReadDepartments();
        await Task.CompletedTask;
    }

    private void ReadDepartments()
    {
        var dep_file = File.ReadAllLines("files\\mae\\dep.csv");
        foreach (var s in dep_file)
        {
            templates_dep.Add(s);
        }
    }

    private async Task LoadMachineGroups()
    {
        // 重置机组选中值为空，自动回到占位选项
        selectedString_MG = string.Empty;
        templates_MG.Clear();

        // 未选中有效部门时直接返回，不加载机组列表
        if (string.IsNullOrWhiteSpace(selectedString_dep))
        {
            return;
        }

        var path_mg = $"files\\mae\\{selectedString_dep}_MG.csv";
        // 加文件存在判断，避免缺少对应机组文件时直接抛错
        if (File.Exists(path_mg))
        {
            var logFile = await File.ReadAllLinesAsync(path_mg);
            foreach (var s in logFile)
            {
                templates_MG.Add(s);
            }
        }
    }
}

如果你用的是 .NET 5 及以下的旧版本 Blazor，不支持@bind:after特性，直接把部门select的绑定换回@onchange="func_dep"即可，记得在方法第一行加上selectedString_dep = e.Value?.ToString();，后续加载机组、重置选中值的逻辑和上面完全一致。

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