How can I reset the selection of a select box (bring to adefault value), if another select box's selection has been changed in Blazor?

Question

I have two select boxes in my Blazor page. I select the department on Select Box-1 and the department related Machine Group on Select Box-2 (List of Select Box-2 will be loaded acc. to selection on Select-Box-1). In general it is working. But I have following problem: If I select Department (MFT) in SB-1 and select the 3. selection of Machine Group in SB-2 and then change the selection in SB-1 to another department: The correct list belonging to the new department is listed in SB-2, but I see directly the 3. selection of the SB-2's nwe selection list. Normaly I would expect that SB-2 should be reset to a default value (-- Select Machine Group--) How can I do that? In other words: How can I set the selection of a selection box with code to a default or predefined selection?

@page "/connect"
@using System.IO

<select class="Dep" @onchange="func_dep">
<option value="">-- Select Department --</option>
@foreach (var dept in templates_dep)
{
<option value=@dept>@dept</option>
}
</select>
<select class="MG" @onchange="func_MG">
<option value="">-- Select Machine Group --</option>
@foreach (var mgt in templates_MG)
{
<option value=@mgt>@mgt</option>
}
</select>

@code{

List<string> templates_dep = new List<string>() { "",""};

protected override async Task OnInitializedAsync()
{
templates_dep.Clear();    
read_dep(); 
}

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

@functions {

string selectedString_dep{get; set; }
List<string> templates_MG = new List<string>() { "", "", "", "", "" };
string selectedString_MG {get; set; }

async void func_dep(ChangeEventArgs e)
{
    templates_MG.Clear();    
    var path_mg ="files\\mae\\"+selectedString_dep+"_MG.csv";
    var logFile = File.ReadAllLines(path_mg);
    foreach (var s in logFile) templates_MG.Add(s);         
    
}

}

Answer 1

You can do it with two way binding and C# property setters :

<select @bind=@SelectedOptionA>
    <option value="">-- Select Department --</option>
    @foreach (var option in A_Options)
    {
        <option value="@option">@option</option>
    }
</select>
<select @bind=@selectedOptionB>
    <option value="">-- Select Machine Group--</option>
    @foreach (var option in B_Options)
    {
        <option value="@option">@option</option>
    }
</select>

@code {
    string selectedOptionA = "";
    string selectedOptionB = "";
    IEnumerable<string> A_Options = Enumerable.Range(start: 1, count: 10).Select(i => $"AOption-{i}");
    IEnumerable<string> B_Options = Enumerable.Empty<string>();

    public string SelectedOptionA
    {
        get => selectedOptionA;
        set
        {
            if (selectedOptionA != value)
            {
                selectedOptionA = value;
                if (value == "")
                {
                    selectedOptionB = "";
                    B_Options = Enumerable.Empty<string>();

                }
                else
                {
                    GetBOptions(value);

                    // Set Default Value
                    selectedOptionB = GetDefaultOption();
                }
            }
        }
    }

    private void GetBOptions(string value)
    {
        // Query real data here
        B_Options = Enumerable.Range(start: 1, count: 10)
                .Select(i => $"{value}/BOption-{i}")
                .ToList();
    }

    private string GetDefaultOption() 
        => B_Options.Skip(random.Next(minValue: 0, maxValue: 9)).First();

    Random random = new Random();
}