Blazor WASM自定义InputSelect组件如何获取多选全部选中值？

嘿，我看你在自定义Blazor WASM的InputSelect<string>多选组件时，遇到了只能拿到第一个选中值的问题，这就来帮你搞定！

问题根源 #

当<select>开启multiple属性后，Blazor的ChangeEventArgs.Value实际上是一个字符串数组，但你直接调用e.Value.ToString()只会输出数组的第一个元素，这就是为啥日志里每次只有单个ID的原因。

解决步骤 #

我们需要修改OnChange方法，正确解析多选返回的数组，更新选中列表，同时同步组件的绑定值：

1. 解析多选值数组：把e.Value转换成string[]类型，再转成List<int>更新selectedServergroups
2. 同步组件绑定值：通过CurrentValueAsString更新组件的值，触发ValueChanged回调，让父组件能拿到最新的选中字符串

修改后的完整代码 #

@using PhoenixBot.Shared.Instances.Shared 
@using PhoenixBot.Client.Helper 
@inherits InputSelect<string> 

<select class="@CssClass multi-select" @onchange="OnChange" multiple> 
    @if (Servergroups != null) { 
        @foreach (var group in Servergroups) { 
            <option value="@Convert.ToInt32(group.Id)" selected="@selectedServergroups.Contains(Convert.ToInt32(group.Id))">
                @group.Name
            </option> 
        } 
    } 
</select> 

@code { 
    [Parameter] public List<Servergroup> Servergroups { get; set; } 
    private List<int> selectedServergroups { get; set; } 

    protected override void OnInitialized() { 
        base.OnInitialized(); 
        // 从初始值解析选中的ID列表
        selectedServergroups = GroupHelper.ParseGroupOfString(CurrentValue); 
    } 

    private void OnChange(ChangeEventArgs e) { 
        // 多选时e.Value是字符串数组，需显式转换
        var selectedIdStrings = e.Value as string[] ?? Array.Empty<string>();
        // 转换为int类型的选中列表
        selectedServergroups = selectedIdStrings.Select(int.Parse).ToList();
        
        // 更新组件的绑定值，同步给父组件
        CurrentValueAsString = GroupHelper.ConvertGroupOfList(selectedServergroups);
        
        // 日志输出所有选中的ID
        Serilog.Log.Error($"选中的服务器组ID：{string.Join(",", selectedServergroups)}");
    } 

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage) { 
        // 这里保持原来的逻辑，将选中列表转换为字符串格式
        result = GroupHelper.ConvertGroupOfList(selectedServergroups); 
        validationErrorMessage = null; 
        return true; 
    } 
}

关键说明 #

• 多选值解析：必须把e.Value转换成string[]，不能直接调用ToString()，否则只会拿到第一个选中项
• 同步绑定值：通过CurrentValueAsString更新值，Blazor会自动触发ValueChanged回调，父组件绑定的属性就能得到最新的选中字符串（比如"73,74,75"这种格式）
• 选中状态匹配：option的selected属性绑定要确保和selectedServergroups的元素一致，这样初始化和选中变更时选项的选中状态才会正确

内容的提问来源于stack exchange，提问作者Lukas Gund