如果在Blazor中更改了另一个选择框，则如何重置选择框的选择（带到Adefault值）？

Question

我的大火页面上有两个选择的盒子。我在SELECT BOX-1上选择部门和Select Box-2上的部门相关机器组（Select Box-2列表将加载ACC。在Select-Box-1上进行选择）。通常，它正在工作。但是我有以下问题： 如果我在SB-1中选择部门（MFT），然后选择SB-2中的机器组3。 将SB-1的选择更改为另一个部门： SB-2中列出了属于新部门的正确列表，但我直接看到了3。 SB-2的NWE选择列表。通常，我希望SB-2应该重置为默认值（ - 选择机器组 - ）我该怎么做？换句话说：如何将具有代码的选择框设置为默认或预定义的选择？

@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

您可以通过两种方式绑定和C＃属性设置器进行操作：

<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();
}

Answer 2

这是我组合的“级联选择”的演示系统，以回答另一个网站上的类似问题。

演示页面：

@page "/Test"
@page "/"

<PageTitle>Index</PageTitle>

<h6>Select Test</h6>

<div class="m-2 p-2 row">
    <div class="col-2">
        Continent:
    </div>
    <div class="col-6">
        <select class="form-select form-select-sm" value="@model.Continent" @onchange=this.ContinentChange>
            <option value="">-- Select A Continent --</option>
            @foreach (var continent in Data.Continents)
            {
                <option value="@continent.Name">@continent.Name</option>
            }
        </select>
    </div>
</div>

<div class="m-2 p-2 row">
    <div class="col-2">
        Country:
    </div>
    <div class="col-6">
        <select disabled="@this.countryDisabled" class="form-select form-select-sm" value="@model.Country" @onchange=this.CountryChange>
            <option value="">-- Select A Country --</option>
            @foreach (var item in filteredCountries)
            {
                <option value="@item.Name">@item.Name</option>
            }
        </select>
    </div>
</div>

<div class="m-2 p-2 bg-light">
    <div>
        Continent = @model.Continent
    </div>
    <div>
        Country = @model.Country
    </div>
</div>

@code {
    private CountryData Data = CountryData.Instance();
    private Model model = new Model();
    private List<Country> filteredCountries = new List<Country>();
    private bool countryDisabled => string.IsNullOrWhiteSpace(this.model.Continent);

    private void ContinentChange(ChangeEventArgs e)
    {
        string continent = e.Value?.ToString() ?? string.Empty;

        if (!model.Continent.Equals(continent, StringComparison.CurrentCultureIgnoreCase))
        {
            filteredCountries.Clear();
            filteredCountries.AddRange(Data.Countries.Where(item => item.Continent == continent));
            model.Country = string.Empty;
            model.Continent = continent;
        }
    }

    private void CountryChange(ChangeEventArgs e)
    {
        string country = e.Value?.ToString() ?? string.Empty;

        if (!model.Country.Equals(country, StringComparison.CurrentCultureIgnoreCase))
            model.Country = country;
    }

    public class Model
    {
        public string Country { get; set; } = string.Empty;
        public string Continent { get; set; } = string.Empty;
    }

}

及其使用的数据集。

namespace BlazorApp3.Data;

public class Continent
{
    public string Name { get; set; } = String.Empty;
}

public class Country
{
    public string Continent { get; set; } = string.Empty;
    public string Name { get; set; } = String.Empty;
}

public class CountryData
{
    public IEnumerable<Country> Countries { get; private set; } = Enumerable.Empty<Country>();
    public IEnumerable<Continent> Continents { get; private set; } = Enumerable.Empty<Continent>();

    private CountryData()
        => this.GetData();

    public void GetData()
    {
        var continents = new List<Continent>();

        var continent = new Continent { Name = "Europe" };
        continents.Add(continent);
        var countries = new List<Country>
        {
            new Country { Name = "France", Continent = continent.Name },
            new Country { Name = "Portugal", Continent = continent.Name },
            new Country { Name = "England", Continent = continent.Name },
        };

        continent = new Continent { Name = "Africa" };
        continents.Add(continent);
        countries.Add(new Country { Name = "Senegal", Continent = continent.Name });
        countries.Add(new Country { Name = "Egypt", Continent = continent.Name });
        countries.Add(new Country { Name = "Kenya", Continent = continent.Name });

        continent = new Continent {Name = "South America" };
        continents.Add(continent);
        countries.Add(new Country { Name = "Brazil", Continent = continent.Name });
        countries.Add(new Country { Name = "Chile", Continent = continent.Name });
        countries.Add(new Country { Name = "Peru", Continent = continent.Name });

        this.Continents = continents;
        this.Countries = countries;
    }

    public static CountryData? _instance;
    public static CountryData Instance()
    {
        if (_instance is null)
            _instance = new CountryData();

        return _instance;
    }
}

Answer 3

我发现最容易使用ijsruntime并调用纯JavaScript函数将其重置。
例如：

这是JavaScript函数：

function resetSelectElement(id) {
    var selectElement = document.getElementById(id);
    selectElement.selectedIndex = 0;  // first option is selected, or
    // -1 for no option selected
}

这是从剃须刀页面调用JavaScript函数的方式：

//contruct
@inject IJSRuntime jsRuntime

//call inside a method
await jsRuntime.InvokeVoidAsync("resetSelectElement", "mySelectId");