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

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

1. 该列表由项目填充。

2. 选择列表是使用 @foreach 循环（se razor 代码）由列表中的项目构建的。

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

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

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

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

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

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

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

Answer 1

我也有类似的问题。我通过if在生成元素的循环中放置一条语句option并从那里有条件地添加selected属性来解决这个问题，这是一个通用示例：

<select @onchange="listChanged">
    @foreach (var item in PageModel.Lists)
    {
        if(item.Id == currListId)
        {
            <option value="@item.Id" selected>@item.Name</option>
        }
        else
        {
            <option value="@item.Id">@item.Name</option>
        }
    }
</select>

Answer 2

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

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

一般来说，在 select 元素中选择一个选项后，select 元素上的 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>