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

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

当我更改具有ProjectSuppliers(作为其循环(的选择元素中的选择时，我应该如何将具有SupplierTypes(作为循环(的选定元素重置为其第一个选项("选择供应商类型"(？

Answer 1

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

@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

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

<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