Blazor 选择下拉菜单通过代码设置活动值

Question

我正在根据列表的内容动态填充下拉列表的值。 when a item in the dropdown is selected an option to remove this item is shown.删除项目后，首先将其从列表中删除，然后重建下拉列表，这就是我遇到问题的地方。不是在重建时将下拉菜单返回到其默认值，而是在已删除下拉菜单下方的值显示为选中（这会在@onchange 值被触发的情况下发生）。重建时如何让下拉列表恢复默认值？

这是一些代码，Razor 代码：

<select class="form-control" @onchange="selectedValue">
   <option value="">select one</option>
   @foreach (var mod in values)
   {
        <option value="@mod.Id">@mod.Name</option>
   }
</select>

填充列表的名为 Items 的类：

public class Items
{
    public string Name { get; set; }
    public int Id { get; set; }
    public Items(string name, int id)
    {
        Name = name;
        Id = id;
    }
}

列表本身（在填充之前）：

public List<Items> itm = new List<Items>();

调用 onchange 的函数：

public string SelectedValue = "";
public void selectedValue(ChangeEventArgs selectEvent)
{
    SelectedValue = selectEvent.Value.ToString();
}

所以总结一下，这就是正在发生的事情：

1. 列表由项目填充。

2. select 列表是使用 @foreach 循环构建的列表中的项目（se razor code）。

3. 从下拉列表中选择了一个项目，这将运行 selectedValue() 函数并更改 SelectedValue 字符串的值。

4. 选中的项目从项目列表中删除

5. 使用修改后的列表重建下拉列表

6. 选中的项目现在设置为已删除项目的正下方，这是在没有运行 onchange 的情况下发生的。这就是问题

7. 现在下拉列表的选定值与 SelectedValue 字符串之一不对应。

这可能可以通过将元素设置为其默认选项/值来解决，但我不知道如何做到这一点。

如何将选定的值更改为下拉列表的默认选项（在我的情况下是值为“”的“选择一个”选项）？

Answer 1

如何将选定的值更改为下拉列表的默认选项（在我的情况下是值为“”的“选择一个”选项）？

恐怕你只能使用 JSInterop 来做到这一点，如下所示：

一般来说，在选择元素中选择一个选项后，选择元素上的 selectedIndex 属性设置为 0。这是在 selectedValue 方法中完成的...

这是一个完整的工作代码sn-p。运行它并测试它...

@page "/"

<select @ref="myselect" id="myselect" class="form-control"
        @onchange="selectedValue">
    <option selected value="-1">select one</option>
    @foreach (var item in items)
    {
        <option value="@item.ID">@item.Name</option>
    }
</select>

<p>@SelectedValue</p>

@code {
    [Inject] IJSRuntime JSRuntime { get; set; }
    private ElementReference myselect;

    List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { 
        Name = $"Name {i.ToString()}", ID = i }).ToList();

    public string SelectedValue = "";

    public void selectedValue(ChangeEventArgs args)
    {
        SelectedValue = args.Value.ToString();
        var item = items.Single(item => item.ID == Convert.ToInt32(SelectedValue));
        items.Remove(item);

        JSRuntime.InvokeVoidAsync("exampleJsFunctions.selectElement", myselect);
    }

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

将以下JS代码放入_Host.cshtml文件中：

<script src="_framework/blazor.server.js"></script>
<script>
    window.exampleJsFunctions =
    {
        selectElement: function (element) {
            element.selectedIndex = 0;
        }
    };
</script>