Blazor -不填充数据的INT ID的级联下拉列表

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
}

List<Item> items = new List<Item>
{
    new Item { Id = 1, Name = "Item 1" },
    new Item { Id = 2, Name = "Item 2" },
    new Item { Id = 3, Name = "Item 3" }
};

<select @bind="selectedItemId">
    <option value="">请选择</option>
    @foreach (var item in items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>

<select @bind="selectedItemId" @onchange="OnItemSelected">
    <option value="">请选择</option>
    @foreach (var item in items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>

<select>
    <option value="">请选择</option>
    @foreach (var subItem in subItems)
    {
        <option value="@subItem.Id">@subItem.Name</option>
    }
</select>

@code {
    int selectedItemId;
    List<Item> subItems = new List<Item>();

    void OnItemSelected(ChangeEventArgs e)
    {
        int selectedId = Convert.ToInt32(e.Value);
        // 根据选中的ID获取对应的子项数据
        subItems = GetSubItems(selectedId);
    }

    List<Item> GetSubItems(int parentId)
    {
        // 根据父项ID从后端获取子项数据
        // 这里只是示例，实际应用中可能需要调用API或查询数据库
        // 返回子项数据的列表
        return new List<Item>
        {
            new Item { Id = 1, Name = "SubItem 1" },
            new Item { Id = 2, Name = "SubItem 2" },
            new Item { Id = 3, Name = "SubItem 3" }
        };
    }
}