如何在Blazor Server中实现多选ListBox的单击选中功能？

完全可行，你的问题出在原有JS代码没有正确触发Blazor绑定依赖的change事件，导致.NET端的SelectedIds无法同步更新。以下是修正后的实现方案：

第一步：确保InputSelect开启多选模式 #

首先要给InputSelect加上multiple属性，并且绑定的SelectedIds必须是可修改的集合类型（比如List<string>，不能是只读的IEnumerable<string>）：

<InputSelect @bind-Value="@testModel.SelectedIds" multiple>
    <option value="1">Hello</option>
    <option value="2">World</option>
    <option value="3">Blazor</option>
</InputSelect>

第二步：替换为有效JavaScript代码 #

放弃模拟Ctrl+Click的思路，直接手动切换选项选中状态并触发change事件，让Blazor感知到值的变化：

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('mousedown', function(e) {
        const target = e.target;
        // 仅处理多选select下的option元素
        if (target.tagName === 'OPTION' && target.parentElement.hasAttribute('multiple')) {
            // 按住Ctrl/Command键时保留原生多选逻辑
            if (e.ctrlKey || e.metaKey) return;

            e.preventDefault(); // 阻止浏览器默认的单选选中行为
            target.selected = !target.selected; // 切换当前选项的选中状态

            // 触发select的change事件，通知Blazor同步绑定值到.NET端
            const selectElement = target.parentElement;
            selectElement.dispatchEvent(new Event('change', { bubbles: true }));
        }
    });
});

为什么原有代码无效？ #

你之前的代码通过模拟Ctrl+Click事件来尝试触发多选，但浏览器原生的多选事件逻辑和手动模拟的事件存在差异，更关键的是没有主动触发select元素的change事件——Blazor的@bind-Value绑定机制依赖这个事件来同步前端值到.NET变量，所以必须显式触发。

注意事项 #

• 确保testModel.SelectedIds是可修改的集合（比如List<string>），如果是只读集合，Blazor无法更新其内容。
• Blazor Server环境下，建议将这段JS代码放在wwwroot/index.html的<body>末尾，或者通过JSInterop在组件初始化时执行，确保DOM渲染完成后再绑定事件。

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