如何在使用select2后选择选项后隐藏下拉菜单中的选项？

Question

我有一个多选的select2下拉框，如下所示： 原始下拉框 在选择了2个选项(A和B)之后，
选择的选项 我只希望选项中出现C。 期望的输出是：
期望的输出 我正在使用C#的razor页面和jquery，如下所示： cshtml：

<select id="selector"
        class="col-md-24"
        multiple="multiple"
        asp-for="Payload.List"
        asp-items="@(new SelectList(Model.DropDown, "Id", "Name"))">
</select>  

JQuery

$('#selector').on("select2:selecting", function (e) {

    $('#' + e.params.args.data._resultId).css("display", "none");
});

这里的“_resultId”是生成选项的id，我想隐藏具有该id的选项。但它没有起作用，请问有人可以帮忙吗？

- mahan

---

<option>元素无法隐藏，但您可以重新构建select的innerHTML。 - Scott Marcus

Answer 1

不确定您使用的select2版本是什么。对于我的项目，我使用的是最新版本的select2 4.1.0-rc.0，只需像下面这样应用css：

@section Scripts
{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg==" crossorigin="anonymous" referrerpolicy="no-referrer" />    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js" integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>    
    <script>
        $("#selector").select2();
    </script>
    <style>
        .select2-results__option--selected {
            display: none;
        }        
    </style>
}

如果上面的CSS对您的项目不起作用，并且您使用其他旧版本，请尝试应用下面的CSS：

.select2-results__option[aria-selected=true] { display: none;}

- Rena