select2加载后如何显示一个类

Question

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

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

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

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

Answer 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 文档以熟悉两者。

Answer 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>