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

Question

我有一个multiselect select2下拉菜单，如下所示原来的下拉选择两个选项(A和B)后，
options Selected我只想要C要出现在选项中期望输出是
期望输出我在c#和jquery中使用razor页面，如下所示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的选项。但这行不通有谁能帮帮忙吗?

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;}