隐藏select2选项

Question

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

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

select2忽略它,不像我禁用一个选项,或使它"readonly".

有任何想法吗？

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：removeAttrhttps ://www.w3schools.com/tags/att_global_hidden.asp

Answer 2

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

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

使用 jQuery 示例：

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