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

除非您知道页面的DOM已经准备好-例如，否则不要初始化select2（$().select2()）。它应该在您到达的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>的可见性，就像下面的代码一样：< / p>

$(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>

select2加载后如何显示课程

2 个答案: