jquery 如何在选择选项后隐藏select2下拉列表中的选项

hgc7kmma  于 2022-11-29  发布在  jQuery
关注(0)|答案(1)|浏览(259)

在选择2个选项(A和B)后,我有一个多选选择2下拉菜单,如下所示Original Dropdown
Options Selected我只希望C出现在选项中所需的输出为
Desired Output我正在使用带有jquery的c#中的剃刀页面,如下所示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");
});

here _resultId有生成的选项的id,我想隐藏带有该id的选项。但它不起作用,有人能帮忙吗

wydwbb8l

wydwbb8l1#

不确定你使用的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;}

相关问题