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

Question

我正在根据列表的内容动态填充下拉列表的值。当下拉列表中的项目被 selected 时，会显示一个删除该项目的选项。当项目被删除时，它首先从列表中删除，然后重建下拉列表，这就是我运行遇到问题的地方。重建下拉列表时，不是 return 将下拉列表设置为默认值，而是在删除的下拉列表下方的值显示为 selected （这发生在没有触发 @onchange 值的情况下） 。如何在重建时将下拉列表 return 设为默认值？

这是一些代码，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>

填充列表的class命名项目：

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();
}

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

列表已更新为项目。
select 列表是使用@foreach 循环（se razor 代码）由列表中的项目构建的.
从下拉列表中 select 编辑了一项，此运行是 selectedValue() 函数并更改 SelectedValue 字符串的值。
select编辑的项目已从项目列表中删除
使用修改后的列表重建下拉菜单
selected 项目现在设置为直接在删除项目下方的项目，这是在没有 onchange 的情况下发生的运行。这就是问题
现在下拉列表的 selected 值不对应于 SelectedValue 字符串之一。

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

如何将 selected 值更改为默认选项 （在我的例子中，"select one" 选项的值为“”）下拉列表？

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

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

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

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

Blazor select dropdown set active value by code

html-select

onchange

drop-down-menu

blazor

blazor-server-side