如何在多选Select组件中判断选项的选中/取消选中状态

问题根源 #

你当前的逻辑依赖SelectedAddresses.AddressList.Contains(address)判断状态，但存在两个核心问题：

• 多选场景下，点击事件触发时，DOM的选中状态与后台集合可能不同步，导致判断逻辑失效
• 如果AddressDTO未重写Equals和GetHashCode，Contains会基于对象引用判断，而非业务标识（如Id），导致误判

最优解决方案：使用Blazor双向绑定 #

直接绑定<select>的选中状态到后台集合，让框架自动同步选中/取消操作，无需手动处理点击事件：

步骤1：确保AddressDTO实现值相等判断 #

在AddressDTO中重写Equals和GetHashCode，让框架能正确匹配选项：

public class AddressDTO
{
    public int Id { get; set; }
    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string Town { get; set; }

    public override bool Equals(object obj)
    {
        return obj is AddressDTO dto && Id == dto.Id;
    }

    public override int GetHashCode()
    {
        return HashCode.Combine(Id);
    }
}

步骤2：修改页面与后台代码 #

删除原有的OnItemClick方法，页面使用@bind绑定到选中集合：

<select multiple @bind="SelectedAddresses.AddressList">
    @foreach (var address in AllVendorAddresses.AddressList)
    {
        <option value="@address">@address.AddressLine1 @address.AddressLine2 @address.Town</option>
    }
</select>

此时框架会自动处理所有选中/取消操作，同步更新SelectedAddresses.AddressList。

备选方案：绑定到Id集合（适合复杂场景） #

如果需要额外处理选中变化逻辑，可以绑定到Id集合，再同步到业务对象：

后台代码 #

private List<int> _selectedAddressIds = new List<int>();

protected override void OnInitialized()
{
    // 初始化时同步已选中的Id
    _selectedAddressIds = SelectedAddresses.AddressList.Select(a => a.Id).ToList();
}

// 选中Id变化时同步业务对象
private void SyncSelectedAddresses()
{
    SelectedAddresses.AddressList.Clear();
    SelectedAddresses.AddressList.AddRange(
        AllVendorAddresses.AddressList.Where(a => _selectedAddressIds.Contains(a.Id))
    );
}

页面代码 #

<select multiple @bind="_selectedAddressIds" @bind:after="SyncSelectedAddresses">
    @foreach (var address in AllVendorAddresses.AddressList)
    {
        <option value="@address.Id">@address.AddressLine1 @address.AddressLine2 @address.Town</option>
    }
</select>

方案三：保留点击事件（不推荐） #

如果必须保留点击事件逻辑，需通过JS互操作获取实时选中状态：

后台代码 #

[Inject]
private IJSRuntime JSRuntime { get; set; }

private ElementReference _selectElement;

protected async Task OnItemClick(AddressDTO address)
{
    // 通过JS获取选项当前的选中状态
    bool isSelected = await JSRuntime.InvokeAsync<bool>(
        "getOptionSelected", 
        _selectElement, 
        address.Id
    );

    if (isSelected)
    {
        if (!SelectedAddresses.AddressList.Contains(address))
        {
            SelectedAddresses.AddressList.Add(address);
        }
    }
    else
    {
        SelectedAddresses.AddressList.Remove(address);
    }
}

页面代码 #

<select multiple @ref="_selectElement">
    @foreach (var address in AllVendorAddresses.AddressList)
    {
        <option value="@address.Id" @onclick="async () => await OnItemClick(address)">
            @address.AddressLine1 @address.AddressLine2 @address.Town
        </option>
    }
</select>

<script>
    function getOptionSelected(selectElement, addressId) {
        const option = selectElement.querySelector(`option[value="${addressId}"]`);
        return option ? option.selected : false;
    }
</script>

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