Question

基本上我正在寻找的是能够从选择项目的下拉菜单中隐藏选项。因此，从技术上讲，它们仍然是可供选择的，但由于它们被隐藏起来，您无法点击它们。

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

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

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

$('.selector').remove();

然后根据它在select2中的位置附加选项：

作为第一个选项出现：

$('.selector')
.prepend('<option value="option-value" class="option-value">Option Label</option>');

显示为最后一个选项：

$('.selector')
.append('<option value="option-value" class="option-value">Option Label</option>');

在任何选项之后出现：

$('<option value="option-value" class="option-class">Option Label</option>')
.insertAfter($('.selector option:first-child'));

或者

$('<option value="option-value" class="option-value">Option Label</option>')
.insertAfter($('.selector > .option-class'));

或

我们可以使用jquery禁用/启用该选项，而不是隐藏。

$('.selector').prop('disabled', 'disabled');

$('.selector')
.prop('disabled', !$('.selector').prop('disabled'));

Answer 4

我有类似的要求。隐藏是首选，但许多这些答案对于几个浏览器来说是不确定的或太复杂。改变select2代码也是不可能的。

我的解决方案是将内存中每个选择的选项副本存储为数组。当我想“隐藏”一个选项时，我会使用jQuery remove（）。当我想“取消隐藏”时，我会将其重新添加到该选项的选项中。

如果可能隐藏了当前可能选择的选项，请记住在选择上调用.trigger（“更改”）。

Answer 5

这是接受的答案的小变化，实际上我不得不修改接受的答案以使其工作，我不得不更改类名，也许这是因为不同版本的Select2库

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

Answer 6

对于select2 3.5，这对我有用：

.select2-result.select2-result-unselectable.select2-disabled {
    display: none;
}

Answer 7

我只花了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中的所有选项。

这可以帮助任何人;）问候

Answer 8

此代码有效。已测试版本Select2 4.0.6

    <select class='select2'>
        <option>WillShow</option>
        <option willHide='true'>WillHide</option>
    </select>

    <style>
        li[aria-disabled='true'] {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(".select2").select2();
        $(".select2 option[willHide='true']").prop("disabled", true);
    </script>

Answer 9

我刚刚对他的答案6作了修改，并通过隐藏属性更改了类，因此，具有隐藏属性的每个选项也将被隐藏在select2容器中，如下所示，选项1将被隐藏：

<select class='mySelect'> My Select 2
<option hidden>1</option>
<option >2</option>
<option >3</option>
</select>

$('.mySelect').select2({templateResult: hideSelect2Option});

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

Answer 10

如果有人想要使用jquery数据标签的另一个选项，这对我来说很方便：

$('.select2 option').each(function(){
        if ($(this).data('condition') != 'true' ) {
          $(this).wrap('<div></div>')
        } else {
          $(this).unwrap('div')
        }
})

Select2：动态隐藏某些选项

10 个答案:

或