当另一个选择选项更改时，如何将所选选项更改为默认值？

问题描述

@inject IAccessData _db

<select @onchange="LoadsupplierType">
   <option value="0">Select supplier</option>

   @foreach (var supplier in Projectsuppliers)
    {
        <option value="@supplier.supplierId">@supplier.supplierName</option>
    }
</select>
<select @bind="Project.supplierType">
   <option>Select supplier type</option>

   @foreach (var type in supplierTypes)
    {
        <option value="@type.supplierTypeName">@type.supplierTypeName</option>
    }
</select>

@code{
private ProjectModel Project;
private List<ProjectsuppliersModel> Projectsuppliers;
private List<supplierTypesModel> supplierTypes;
private int supplierId = 1;

public void CreateProject()
{
    //a function to insert the current project in the database
}

protected override void OnInitialized()
{
    Projectsuppliers = _db.GetProjectsuppliers();
    supplierTypes = _db.GetsupplierTypes(supplierId);
}

public void LoadsupplierType(ChangeEventArgs eventArgs)
    {
        if(supplierTypes is not null)
        {
            supplierTypes.Clear();
        }

        int newValue= Int32.Parse(eventArgs.Value.ToString());

        if(newValue!= 0)
        {
            supplierId = newValue;
            Project.supplier = _db.GetsupplierById(supplierId).supplier;
            supplierTypes = _db.GetsupplierTypes(supplierId);
        }        
    }

当我更改具有 Projectsuppliers（作为其循环）的选择元素中的选择时，我应该如何将具有供应商类型（作为其循环）的选择元素重置为其第一个选项（“选择供应商类型”）？

解决方法

使用所选供应商的设置器：

<select @bind="@SelectedSupplierId">
    <option value="0">Select a supplier</option>
    @foreach (var supplier in suppliers)
    {
        <option value="@supplier.Id">@supplier.SupplierName</option>
    }
</select>
<select @bind="@selectedSupplierTypeId">
    <option value="0">Select a supplier type</option>
    @foreach (var supplierType in supplierTypes)
    {
        <option value="@supplierType.Id">@supplierType.SupplierTypeName</option>
    }
</select>
@code {
    [Inject]
    private IAccessData _db { get; set; }
    private int selectedSupplierId;
    private int selectedSupplierTypeId;
    private IEnumerable<ProjectSuppliersModel> suppliers;
    private IEnumerable<SupplierTypesModel> supplierTypes;

    public int SelectedSupplierId
    {
        get => selectedSupplierId;
        set
        {
            if (selectedSupplierId == value) return;
            selectedSupplierId = value;
            supplierTypes = _db.GetSupplierTypes(selectedSupplierId);
            selectedSupplierTypeId = default;
        }
    }    
    protected override void OnInitialized()
    {
        selectedSupplierId = default;
        selectedSupplierTypeId = default;
        suppliers = _db.GetProjectSuppliers();
        supplierTypes = Array.Empty<SupplierTypesModel>();
    }
}

BlazorRepl

,

我更喜欢保留一个实际的类变量来存储选定的 OBJECT，而不是将选定的 ID 跟踪为 int。这样，很容易在 Blazor 中使用 null 检查进行格式化。当我以后想使用那个对象时，我不需要查找任何东西——它已经设置好了。

@page "/dropdown"

@if (SupplierTypes is not null)
{
    <select @onchange="HandleSupplierTypeChange">
        @if (SelectedSupplierType is null)
        {
            <option disabled selected>Select supplier type</option>
        }
        @foreach (var item in SupplierTypes)
        {
            <option value="@item.ID">@item.TypeName</option>
        }
    </select>
    <br />
}
@if (LoadedSuppliers is not null)
{
    <select @onchange="HandleSupplierChange">

        @if (SelectedSupplier is null)
        {
            <option selected disabled>Select a supplier</option>
        }
        @foreach (var item in LoadedSuppliers)
        {
            <option value="@item.ID">@item.SupplierName</option>
        }
    </select>
}

@code {
    class SupplierType
    {
        public int ID { get; set; }
        public string TypeName { get; set; }
    }
    class Supplier
    {
        public int ID { get; set; }
        public int SupplierTypeID { get; set; }
        public string SupplierName { get; set; }
    }
    List<SupplierType> SupplierTypes { get; set; }
    List<Supplier> AllSuppliers { get; set; }  
    List<Supplier> LoadedSuppliers { get; set; }  results
    SupplierType SelectedSupplierType { get; set; } // *** Note THIS! ***
    Supplier SelectedSupplier { get; set; } // *** Note THIS! ***

    async Task HandleSupplierTypeChange(ChangeEventArgs args)
    {
        int selectedID = Convert.ToInt32(args.Value.ToString());
        SelectedSupplierType = SupplierTypes.Where(st => st.ID == selectedID).Single();
        LoadedSuppliers = await LoadSupplierList(SelectedSupplierType.ID);
    }
    async Task<List<Supplier>> LoadSupplierList(int NewTypeID)
    {
        // Ignore my code,this is where you do DB
        return AllSuppliers.Where(all => all.SupplierTypeID == NewTypeID).ToList();
    }
    async Task HandleSupplierChange(ChangeEventArgs args)
    {
        int selectedID = Convert.ToInt32(args.Value.ToString());
        SelectedSupplier = LoadedSuppliers.Where(ls => ls.ID == selectedID).Single();
        SelectedSupplierType = null;
        //Do other DB stuff for the selected supplier here
    }
    protected override async Task OnInitializedAsync()
    {
        // I'm hard-coding the load,but you use DB
        SupplierTypes = new List<SupplierType> {
            new SupplierType{ ID=1,TypeName="Raw Resources"},new SupplierType{ ID=2,TypeName="Wholesale parts"},new SupplierType{ ID=3,TypeName="Retail items"}
        };
        AllSuppliers = new List<Supplier> {
            new Supplier{ID=1,SupplierTypeID = 1,SupplierName="OilInc"},new Supplier{ID=2,SupplierName="GlassCo"},new Supplier{ID=3,SupplierTypeID = 2,SupplierName="WashersRUs"},new Supplier{ID=4,SupplierName="ScrewsInc"},new Supplier{ID=5,SupplierTypeID = 3,SupplierName="Levike"},new Supplier{ID=6,SupplierName="ArmaniSassoon"}
        };
    }
}