How to change the selected option to default when another select-option changes?

Question

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

What should I do to reset the select element which has SupplierTypes(as its loop) to its first option("Select Supplier type") when I change the selection in the select element which has ProjectSuppliers (as its loop)?

Answer 1

I prefer to keep an actual class variable to store selected OBJECT rather than tracking the selected ID as int. That way, it's easy to use null checks to format in Blazor. And when I want to use that object in the future, I don't have to look anything up-- it's already set.

@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, SupplierTypeID = 1, SupplierName="GlassCo"},
            new Supplier{ID=3, SupplierTypeID = 2, SupplierName="WashersRUs"},
            new Supplier{ID=4, SupplierTypeID = 2, SupplierName="ScrewsInc"},
            new Supplier{ID=5, SupplierTypeID = 3, SupplierName="Levike"},
            new Supplier{ID=6, SupplierTypeID = 3, SupplierName="ArmaniSassoon"}
        };
    }
}

Answer 2

Use the setter of the selected supplier:

<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