Hide/Show 选择2

Question

我想隐藏或显示我的 select2，但我在 API 中找不到方法。我正在使用一种解决方法，隐藏父级，如下所示：

$(document).on('change', '.country', function () {
    if ($(this).val() == $(this).data('current-countryCode')) {
        $('#states').parent().show();
    }
    else {
        $('#states').parent().hide();
    }
});

但我想知道是否有人可以提供帮助，或者 API 中是否存在这样的方法。

Answer 1

我做了类似的事情，但是我隐藏了 select2 容器，它总是从起点开始的下一个节点，所以它看起来像。

$(document).on('change', '.country', function () {
    if ($(this).val() == $(this).data('current-countryCode')) {
        $('#states').next(".select2-container").show();
    }
    else {
        $('#states').next(".select2-container").hide();
    }
});

所以我一直采用与您相同的方法

Answer 2

另一种解决方法 – 您可以在创建时向 select2 对象添加 class

$("#user-box").select2({
    containerCssClass : "show-hide"
});

...然后在需要时使用

隐藏它

$(".show-hide").parent().parent().hide();

Answer 3

问题是您必须隐藏所有与 select2 下拉列表关联的项目（插件生成的所有项目以执行此操作）。

我使用包含 select2 下拉列表的 div 和 show/hide 这个 div.

解决了问题

Answer 4

这对我有用..

jQuery("#my-select2").select2().next().hide();

Answer 5

通过扩展 $.fn 更容易

    $.fn.toggleSelect2 = function(state) {
        return this.each(function() {
            $.fn[state ? 'show' : 'hide'].apply($(this).next('.select2-container'));
        });
    };

然后简单地在 select 元素上调用它。

$('select').toggleSelect2(true); //Show

或

$('select').toggleSelect2(false); //hide

Answer 6

将 Select2 放入 div。在这种情况下，我只是将 div #select 声明为 Select2:

$('#select').select2();

<div id='select_parent'><div id='select'></div></div>

Show/hide div 包含 Select2:

$('#select_parent').hide();

Answer 7

我的解决方法是先销毁 select2 然后隐藏 select

  $("#select").select2('destroy');
  $("#select").attr('style','display: none');

为了再次显示它，我删除了显示：none 并重新创建了 select2

$("#select").attr('style', '');
$("#select").select2();

Obs：确保在重新创建时使用与 select2 相同的配置，或者使用 data-* 属性。

Hide/Show 选择2

Hide/Show Select2

jquery

show

hide

select2