Question

我试图隐藏一些select2选项，但是当我做这样的事情时：

<option style="display: none;">...</option>

select2忽略它，不像我禁用一个选项，或使它“只读”。

有什么想法吗？

Answer 1

我在寻找同一问题的答案时偶然发现了这个问题，并使用select2的'templateResult'回调解决了这个问题。

<select id="mySelect">
  <option value="1" data-show="1">1</option>
  <option value="2">2</option> <!-- option i want to hide -->
</select>

初始化我的select2：

var dataIWantToShow = '1';
$('#mySelect').select2({
    templateResult: function(option) {
        var myOption = $('#mySelect').find('option[value="' + option.id + '"');
        if (myOption.data('show') == dataIWantToshow) {
            return option.text;
        }
        return false;
    }
});

为了避免在select2选项列表中显示空li，我添加了以下css：

li.select2-results__option:empty {
    display: none;
}

此解决方案不会添加或删除原始选择中的选项。

working fiddle

Answer 2

我用一个史诗般的解决方案解决了这个问题。

我的 select2 版本是 4.0.5，只需要在每个隐藏选项中使用 hidden 属性（您可以更改其逻辑），而不需要 style="display:none"（对我来说更干净）。

<select class="select2">
   <option value="">Select</option>
   <option value="1">One</option>
   <option value="2" hidden>Two</option>
   <option value="3">One</option>
</select>

现在，唯一需要的代码是在 select2 的初始化中：

$('.select2').select2({
   templateResult: function(option) {
      if(option.element && (option.element).hasAttribute('hidden')){
         return null;
      }
      return option.text;
   }
});

hidden 是标准属性，您可以使用 attr 和 removeAttr jQuery 方法动态更改它：https://www.w3schools.com/tags/att_global_hidden.asp

Answer 3

为什么你需要那个？简单：删除此选项！

如果您只需要在某些情况下展示，则可以使用javascript。

使用jQuery示例：

if (condition) {
    $('#yourselect').append('<option value="foo" selected="selected">Foo</option>');
}

Answer 4

也许这个问题已经过时但是我已经遇到了同样的问题。我正在使用select2 v.3.5.1，我能够像这样解决它：

我在要隐藏的选项上添加了一个类：

<option class="hide_me">...</option>

应该是这样的：

.hide_me {
  display: none!important;
}

基本上我使用style属性执行的操作与使用css类相同。 style属性对我也不起作用（即使multi select2似乎隐藏了所选的选项）。

希望这可以提供帮助。

Answer 5

您应该删除不应该提供的选项。如果您需要在JavaScript中动态执行此操作，则可以首先克隆完全填充的<select>元素。在任何时候，您都可以删除原始<select>中的所有选项，并仅复制您希望此时可用的选项。这样你就不会丢失任何样式，元数据，排序等。

以下是一个例子：

$(document).ready(function () {
    var select = $(".yourselect");
    var selectClone = select.clone();

    function updateSelect() {
        var oldVal = select.val();

        // first, remove all options
        select.find("option").remove();

        // now add only those options that should be available from the clone
        // replace "data-show='yes'" with whatever you criteria might be
        var options = selectClone.find("option[data-show='yes']").clone();
        select.append(options);

        // restore previously selected value if it is still possible
        if (select.find("option[value='" + oldVal + "']").length === 0) {
            oldVal = "";
        }
        select.val(oldVal);

        // update select2
        select.trigger('change');
    }
});

Answer 6

您可以禁用该选项，然后添加一些 css 来隐藏选项：

<option disabled="disabled">text</option>

CSS：

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

Answer 7

您可以使用disabled="disabled"属性将其停用。

<option value="4" disabled="disabled">Product 4</option>

请参阅此fiddle

隐藏select2选项

7 个答案: