如何处理有序 <select> 元素中的订单更改答案

【问题标题】：How to handle order change in an ordered <select> element如何处理有序 <select> 元素中的订单更改
【发布时间】：2022-02-14 22:58:21
【问题描述】：

假设我有以下代码来生成一个下拉元素和一个文本输入来更改排序列表中项目的名称：

@page "/"

<input @bind="@SelectedFoo.Name"/>

<select @bind="SelectedFooId">
    @foreach (var foo in MyFoos.OrderBy(e => e.Name))
    {
        <option value="@foo.Id">@foo.Name</option>
    }
</select>

@code
{
    private Foo SelectedFoo { get; set; }
    private string _selectedFooId;

    private string SelectedFooId
    {
        get => _selectedFooId;
        set
        {
            _selectedFooId = value;
            SelectedFoo = MyFoos.Find(e => e.Id == _selectedFooId);
        }
    }

    private List<Foo> MyFoos { get; } = new()
    {
        new Foo { Name = "A Foo", Id = "0" },
        new Foo { Name = "B Foo", Id = "1" },
        new Foo { Name = "C Foo", Id = "2" }
    };

    protected override void OnInitialized()
    {
        SelectedFooId = MyFoos.First().Id;
    }


    public class Foo
    {
        public string Name { get; set; }
        public string Id { get; set; }
    }
}

如果我现在选择“C Foo”并将其名称更改为“Ab Foo”，它现在在“B Foo”上方的下拉列表中正确排序，但选择元素现在显示“B Foo”而不是“Ab Foo" 被选中。

如何更新选择元素的选定项以反映顺序更改？

框架：.NET 6.0
浏览器：任意

【问题讨论】：

这是一个很好的 MRE，但没有复制。请添加 Blazor 版本并指定哪些浏览器

标签： c# html blazor

【解决方案1】：

尝试像这样使用@key 指令：

<option @key="foo" value="@foo.Id">@foo.Name</option>

【讨论】：