Select2:动态隐藏某些选项

Question

基本上我正在寻找的是能够隐藏选项的下拉列表中的选项.所以,从技术上讲,它们仍然是选项,但你只是无法点击它们,因为它们是隐藏的.

我查看了文档并找到了与禁用相关的内容,不幸的是我非常特别想要隐藏项目的能力.有没有人有关于如何做到这一点的建议？

是否有可能做一些事情,让select在原始<option>元素和该元素的select2副本之间做一些特定的映射,这也可以.例如,假设"如果原始<option>类具有此类或具有此类属性,则选择下拉列表中的结果项将以这种方式构造".

Answer 1

将以下CSS规则添加到页面可以解决您的问题吗？

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

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

也可以使用disabled而不是display:'none'在您的选项列表中.

JS Bin

Answer 2

如果你想实现它,也许你可以修改select2.js代码,

首先我隐藏了第二个选项,原来它在你使用时不起作用

select2插件,

<select id="test" style="width:100px">
  <option></option>
  <option value='1'>1</option>
  <option value='2' style="display:none">2</option>
</select>

其次我将修改select2.js代码:第926行

我&& element.css('display') != 'none'在这里 添加额外的条件声明

 process = function (element, collection) {
     var group;
     if (element.is("option") && element.css('display') != 'none') {
         if (query.matcher(term, element.text(), element)) {
              collection.push(self.optionToData(element));
              }
     } else if (element.is("optgroup")) {
              group = self.optionToData(element);
              element.children().each(function (i, elm) { 
                       process(elm, group.children); 
                   });
              if (group.children.length > 0) {
                       collection.push(group);
              }
      }
     };

JSBIN http://jsbin.com/qusimi/1/edit

Answer 3

我只花了3个小时，就为我动态显示/隐藏select2容器中的选项找到了一个非常干净简单的解决方案。

首先，我使用以下选项创建select2：{.. templateResult：resultState，..}

然后，我提供此回调以将所有类从原始选项复制到select2-option（我根据其类显示/隐藏选项）

    function resultState(data, container) {
    if(data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

在我的CSS中，我声明了这一行：

.select2-container--default .select2-results__option.optInvisible {
display: none;}

现在，我可以使用addClass（“ optInvisible”）或removeClass（“ optInvisible”）轻松显示或隐藏select2-container中的所有选项。

可能对任何人有帮助;）问候