Select2:动态隐藏某些选项 [英] Select2: Hide certain options dynamically

问题描述

基本上，我要寻找的是能够从所选项目的下拉菜单中隐藏选项的功能.因此，从技术上讲，它们仍然是选项，但由于它们是隐藏的，因此您将无法单击它们.

Basically what I'm looking for is the ability to hide options from the dropdown of select items. So, technically they would still be options, but you just wouldn't be able to click them since they're hidden.

我仔细阅读了文档，发现了与禁用相关的内容，但不幸的是，我非常希望能够隐藏项目.有人对如何做到这一点有建议吗?

I've looked through the docs and have found things related to disabling, unfortunately I very specifically want the ability to hide items. Does anyone have advice on how to accomplish this?

是否有可能做一些事情，例如让select在原始<option>元素和 select2 该元素的副本，也可以使用.例如，例如，如果原始<option>具有此类或具有此类属性，则将以这种方式构造select下拉列表中的结果项".

Were it possible to do something like have the select do some specific mapping between the original <option> element and the select2 copy of that element, that would work as well. As an example, say, "if the original <option> has such class or has such attribute, the resulting item in the select dropdown will be constructed this way".

推荐答案

是否要在页面上添加以下CSS规则来解决您的问题?

Would adding the following CSS Rule to the page solve your problem?

.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}

基本上，它会隐藏一个禁用选项，而不是显示灰色背景.

Basically it would hide a disable option instead of displaying it with a gray background.

在选项列表中也使用disabled代替display:'none'.

Use disabled instead of display:'none' in your options list also.

JS Bin

这篇关于Select2:动态隐藏某些选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！