drop-down-menu - Blazor 选择下拉列表通过代码设置事件值

Question

我正在根据列表的内容动态填充下拉列表的值。选择下拉列表中的项目显示删除此项目的选项。当项目被删除时，它首先从列表中删除，然后重建下拉列表，这是我遇到问题的地方。重建下拉列表时，它不会将下拉列表返回到其默认值，而是将删除的值正下方的值显示为选中(这不会触发 @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();
}

总而言之，这就是正在发生的事情:

该列表包含 Items。

选择列表是使用@foreach 循环(se razor 代码)由列表中的项目构建的。

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

所选项目从项目列表中删除

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

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

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

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

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

Answer 1

How can I change the selected value to be the default option (in my case the "select one" option with value "") of my dropdown list?

恐怕您只能使用 JSInterop 来做到这一点，如下所示:
一般来说，select 元素上的 selectedIndex 属性在您选择 select 元素中的一个选项后设置为 0。这是在 selectedValue 方法中完成的...
这是一个完整的工作代码片段。运行它并测试它...

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

在_Host.cshtml文件中加入以下JS代码:

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