Blazor中多选select绑定数组后行为异常，如何阻止修改绑定变量？

问题出在你把数据源变量直接作为双向绑定的目标了：Blazor的@bind是双向绑定机制，当多选Select的选中项变化时，会自动将选中的选项值数组赋值给绑定的变量m_otherClients，而你又用这个变量来渲染选项，所以一旦选中项改变，原数据源被覆盖，UI就只剩选中的那一项。

解决方法很简单，把数据源和选中值变量分开：

1. 新增一个专门用于绑定选中状态的变量：

private string[] m_otherClients = {"Volvo", "Saab", "Opel", "Audi"};
private string[] selectedClients = Array.Empty<string>(); // 存储选中项

2. 修改Select元素，绑定到新的选中变量，数据源依然用m_otherClients：

<select multiple @bind="selectedClients" name="cars" id="cars">
    @if (m_otherClients != null)
    {
        @foreach (var cnt in m_otherClients)
        {
            <option value="@cnt">@cnt</option>
        }
    }
</select>

这样操作Select选项时，只会修改selectedClients的值，原数据源m_otherClients完全不受影响，UI也会保持所有选项的显示，同时你还能通过selectedClients获取用户选中的内容。

如果你的需求只是展示选项、不需要获取选中值，甚至可以直接去掉@bind属性，完全使用静态渲染：

<select multiple name="cars" id="cars">
    @if (m_otherClients != null)
    {
        @foreach (var cnt in m_otherClients)
        {
            <option value="@cnt">@cnt</option>
        }
    }
</select>

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