select2加载后如何显示一个类

Posted 2023-05-07

【中文标题】select2加载后如何显示一个类

【英文标题】：How to show a class once select2 has loaded

【发布时间】：2019-07-09 13:07:15

【问题描述】：

我正在尝试在 select2 加载后将类可见性状态更改为可见。

我已经能够隐藏类，但我的代码的第二部分似乎还没有工作。

jQuery(document).ready(function ($) 
    $('.searchandfilter li').css( 'visibility': 'hidden' )
);

$.when(
    $("select[class*='select2']").select2(
        allowClear: true
    )).done(function () 
        $('.searchandfilter li').css( 'visibility': 'visible' )
    );

【问题讨论】：

你不能在任何事情上使用when/done，它必须是一个“Thenable object”——我相当怀疑select2实际上是一个。但是无论如何，这样一个元素的创建应该几乎立即发生，所以如果你只是初始化你的 select2，然后让其他元素直接在下一行可见是不是不够...？

感谢 Cristiano 的回复.....我遇到了 ios 选择菜单显示一瞬间的问题，,, 这就是为什么我试图等待 select2 加载后再显示它.......你会推荐一种不同的方式吗？

【参考方案1】：

您不应该初始化 select2 ($().select2())，除非您知道页面的 DOM 已准备好 - 即。它应该在您所拥有的 ready(function($)...) 块内。

您错误地使用了$.when() 块。这些用于您在此处未使用的承诺。 done 部分根本不会触发。你应该删除它。

无论如何，除非它正在执行一些花哨的回调，否则$().select2() 函数应该立即初始化 select2，允许您在初始化 select2 的行之后立即隐藏 .searchandfilter 元素。

如果这仍然不起作用，作为最后的手段，我会将您的隐藏逻辑放在 setTimeout() 块中，并检查 select2 是否已使用此初始化：Is there any way to check if an element has jquery select2 already applied to it?

确保您已阅读 jQuery 和 select2 文档以熟悉两者。

【讨论】：

谢谢 Mikepote，我查看了链接并根据答案提出了一个想法，但 Amine KOUIS 下面的答案似乎有效....不幸的是，这并没有解决我的问题IOS选择菜单显示一瞬间，，，我应该从一开始就包含它......

【参考方案2】：

您可以使用 show() 和 hide() 来处理列表 <li> 的可见性，就像下面的代码一样：

$(document).ready(function()
    $("#select2").change(function()
        $(this).find("option:selected").each(function()
            var optionValue = $(this).attr("value");
            if(optionValue)
                $(".searchandfilter li").show();
             else
                $(".searchandfilter li").hide();
            
        );
    ).change();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select2">
       <option>Choose Text</option>
       <option value="text1">Text 1</option>
       <option value="text2">Text 2</option>
        <option value="text3">Text 3</option>
</select>

 <ul class="searchandfilter">
       <li>Lorem Ipsum</li>
 </ul>

编辑：对于 IOS，选择菜单将显示一瞬间，因此您可以使用 css 添加隐藏类以防止列表 <li> 首先显示，所以这是另一种方法：

$(document).ready(function()
    $("#select2").change(function()
        $(this).find("option:selected").each(function()
            var optionValue = $(this).attr("value");
            if(optionValue)
                $(".searchandfilter li").removeClass("hidden");
             else
                $(".searchandfilter li").addClass("hidden");
            
        );
    ).change();
);

.hidden 
display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select2">
       <option>Choose Text</option>
       <option value="text1">Text 1</option>
       <option value="text2">Text 2</option>
        <option value="text3">Text 3</option>
</select>

 <ul class="searchandfilter">
       <li class="hidden">Lorem Ipsum</li>
 </ul>

【讨论】：

感谢 Amine KOUIS，这似乎奏效了！！是否仅在将 select2 加载到系统后才显示？ .....我等待select2 laod的原因是解决IOS选择菜单显示一瞬间的问题，当我点击下拉菜单时，不幸的是，这并没有解决它.. .....你知道隐藏或禁止显示IOS选择菜单的方法吗？

谢谢@Amine KOUIS...我更新了代码，我仍然看到IOS菜单短暂[screencast.com/t/X1J4WSrfbox]