如何在Select2多选下拉框中隐藏已选中的选项

你的问题出在对Select2的DOM渲染机制和事件时机理解有误：

• select2:selecting是选中前触发的事件，此时选项还未被正式选中，操作DOM的修改会被Select2后续的渲染覆盖
• 直接通过_resultId定位元素不可靠，Select2动态生成的下拉选项使用统一类名而非你预期的ID

下面是可行的实现方案：

实现思路 #

每次打开下拉框时，自动过滤掉已选中的选项，只保留未选中的选项供选择。利用Select2的select2:open事件触发过滤逻辑，确保每次下拉展开时都能正确更新选项显示状态。

完整前端代码 #

<!-- Razor Pages 生成的select元素保持不变 -->
<select id="selector"
        class="col-md-24"
        multiple="multiple"
        asp-for="Payload.List"
        asp-items="@(new SelectList(Model.DropDown, "Id", "Name"))">
</select>

<script>
// 初始化Select2
$('#selector').select2({
    placeholder: "请选择选项",
    allowClear: true
});

// 监听下拉框打开事件，过滤已选中选项
$('#selector').on('select2:open', function() {
    // 获取当前已选中的选项值数组
    const selectedValues = $(this).val() || [];
    // 遍历所有下拉选项，隐藏已选中的项
    $('.select2-results__option').each(function() {
        const optionData = $(this).data('data');
        if (selectedValues.includes(optionData.id)) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

// 可选：选中选项后立即关闭下拉框（如果需要选中后自动收起）
$('#selector').on('select2:select', function() {
    $(this).select2('close');
});
</script>

代码说明 #

1. Select2初始化：添加占位符和清除按钮，提升用户体验
2. 下拉打开时过滤：在select2:open事件中，通过$(this).val()获取已选中的值，然后遍历所有下拉选项（类名为select2-results__option），根据选项ID判断是否已选中，进而控制显示/隐藏
3. 可选自动关闭：如果需要选中选项后自动收起下拉框，添加select2:select事件监听即可

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