Blazor选择下拉菜单按代码设置活动值 [英] Blazor select dropdown set active value by code

问题描述

我根据列表的内容动态填充下拉列表的值。选择下拉列表中的项目时，将显示删除该项目的选项。当项目被删除时，它首先从列表中删除，然后重新构建下拉列表，这就是我遇到问题的地方。在重新构建下拉列表时，它不会将下拉列表返回到其缺省值，而是将删除的下拉列表下面的值显示为选定的(这种情况下，@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代码)由列表中的项目构建的。

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

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

5. 使用修改后的列表重新生成下拉列表

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

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

这可能可以通过将元素设置为其默认选项/值来解决，但我无法确定如何执行此操作。

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

推荐答案

如何将所选值更改为下拉列表的默认选项(在我的示例中为"；选择值为"；"；的选项)？

恐怕只有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>

这篇关于Blazor选择下拉菜单按代码设置活动值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！