jquery - 隐藏 Select2 选项

Question

我试图隐藏一些 Select2 选项，但是当我执行以下操作时:

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

Select2 会忽略它，这与我禁用选项或将其设置为“只读”时不同。

有什么想法吗？

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 是一个标准属性，您可以使用 attr 和 removeAttr jQuery 方法动态更改它:https://www.w3schools.com/tags/att_global_hidden.asp