Blazor选择下拉菜单通过代码设置有效值

Question

我正在根据列表的内容动态填充下拉列表的值。当选择下拉菜单中的一个项目时，将显示一个删除该项目的选项。删除项目后，首先将其从列表中删除，然后重新构建下拉列表，这是我遇到问题的地方。重建下拉列表时，与其将下拉列表恢复为其默认值，不如将其显示为已删除的下拉列表下面的值（（在触发@onchange值时会发生这种情况）>）。重建列表时，如何使下拉列表恢复为默认值？

这是一些代码，剃刀代码：

<select class="form-control" @onchange="selectedValue">
   <option value="">select one</option>
   @foreach (var mod in values)
   {
        <option value="@mod.Id">@mod.Name</option>
   }
</select>
名为Item的类，它填充列表：

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循环（剃须刀代码）由列表中的项目构成的。

3. 从下拉列表中选择一个项目，它将运行selectedValue（）

函数并更改SelectedValue字符串中的值。

4. [所选项目将从项目列表中删除

5. 使用下拉列表重新构建下拉列表

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

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

这可能可以通过将元素设置为其默认选项/值来解决，但我不知道该怎么做。

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

我正在根据列表的内容动态填充下拉列表的值。当选择下拉菜单中的一个项目时，将显示一个删除该项目的选项。删除该项目后，它就是...

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

恐怕您只能使用JSInterop进行如下操作：

通常来说，在选择元素中选择一个选项后，会将选择元素上的selectedIndex属性设置为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; }

}
}
将以下JS代码放入_Host.cshtml文件：
 <script src="_framework/blazor.server.js"></script>
<script>

    window.exampleJsFunctions =
    {
        selectElement: function (element) {
            element.selectedIndex = 0;
        }
    };
</script>

Answer 1

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