隐藏Select2选项

Question

我正在尝试隐藏一些Select2选项，但当我像这样操作时：

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

选择2不会忽略它，与禁用选项或将其设置为“只读”不同。有什么想法吗？

- Tomer Amir

---

我解决了同样的问题，你可以查看这个主题，https://dev59.com/Ul8f5IYBdhLWcg3wFfP_#25085053 - holmes2136

Answer 1

我用史诗级的解决方案解决了这个问题。 我的 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是一个标准属性，您可以使用jQuery的attr和removeAttr方法动态更改它：https://www.w3schools.com/tags/att_global_hidden.asp

- Eng. Ariel Grassano

---

我觉得在我的情况下这个不起作用。你能看一下吗？https://jsfiddle.net/vh2L1oct/4/ - Tan

Answer 2

当我在寻找答案解决同样的问题时，我偶然发现了这个主题，通过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;
}

这个解决方案不会添加或删除原始选择中的选项。 演示链接

- Jorigole

Answer 3

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

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

CSS：

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

- mangatinanda

Answer 4

尝试这段代码

在您的页面中添加此样式

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

在 Select2 下拉菜单中的选项中添加一个属性。

<select class='select2'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option data-status="0" value="3">Option 3</option>
</select>

添加这段Jquery代码以使用select2

$(".select2").select2();
$(".select2 option[data-status='0']").prop("disabled", true);

- Syamlal

Answer 5

也许这个问题很旧，但我为了同样的问题来到这里。 我正在使用select2 v. 3.5.1，我能够像这样修复它： 我给我想要隐藏的选项添加了一个类：

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

应该是这样的：

.hide_me {
  display: none!important;
}

基本上，我所做的与您使用样式属性所做的相同，但是我使用了CSS类。即使多选2似乎以这种方式隐藏了所选选项，但样式属性对我也不起作用。

希望这可以帮到您。

- lzzluca

---

我不知道select2 v3.5.1，但是这个解决方案在v4中根本不起作用。 - naXa stands with Ukraine

Answer 6

您应该删除不应该出现的选项。如果您需要在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');
    }
});

- nharrer

Answer 7

你为什么需要那个？ 很简单：移除这个选项！

如果你只需要在某些情况下显示，可以使用JavaScript。

使用jQuery示例：

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

- user3279626

---

我已经这样做了，但我希望有一个更优雅的解决方案。 - Tomer Amir

我厌倦了只告诉你不要做某事的答案。如果他想保留排序顺序并再次显示选项，该怎么办？ - Precious Roy

Answer 8

您可以使用disabled="disabled"属性来禁用它。

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

请参考此fiddle。

- Chirag Vidani

---

这并不隐藏选项......而且你的例子只是简单的 HTML，我说的是 select2 插件。 - Tomer Amir

添加一些 CSS，它就会变成 .select2-container--default .select2-results__option[aria-disabled=true] { display: none;}。 - Mark Schultheiss