1

一旦加载了 select2，我正在尝试将类可见性状态更改为可见。

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

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

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

2 回答 2

0

您可以使用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>

于 2019-02-15T12:01:40.000 回答
0

$().select2()除非您知道页面的 DOM 已准备好，否则您不应该初始化 select2 ( ) - 即。它应该在ready(function($){...})你到达那里的街区内。

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

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

如果这仍然不起作用，作为最后的手段，我会将您的隐藏逻辑放在一个setTimeout()块中并检查 select2 是否已使用以下方法初始化：有没有办法检查一个元素是否已经应用了 jquery select2？

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

于 2019-02-15T11:46:47.933 回答