Jquery 隐藏/显示销毁选定的插件 CSS

Question

<script>
$(document).ready(function(e) {
    $("#b").hide();
    $(".chosen").chosen();
    $("#a").click(function(){$("#b").show();});
});
</script>
<p id="a">aaaa</p>
<div id="b">
<select class="chosen">
<option>Classification</option>
<option>aaaa</option>
<option>bbb</option>
</select>
</div>

我有选择下拉列表使用所选插件。但是，当我尝试隐藏表单并使用单击显示表单时，所选的 css 布局将被破坏。

有人知道如何解决这个问题吗？

这是小提琴：

http://jsfiddle.net/cZV6G/

Answer 1

是的，您可以尝试设置元素visibility。

要解决此问题，您可以使用visibility:hidden而不是.hide()，并且要显示下拉列表，请使用visibility:visible而不是.show()。

试试这个代码：

$(document).ready(function(e) {
    $("#b").css('visibility','hidden');
    $(".chosen").chosen();
    $("#a").click(function(){$("#b").css('visibility','visible');});
});

尝试是 jsfiddle

更新：解决可见性问题

jquery .hide()没有问题。真正的问题是，您在应用.chosen()之前隐藏元素。但是，如果您在应用.chosen()后尝试隐藏元素，那么它可以正常工作。

$(document).ready(function(e) {
    $(".chosen").chosen();
    $("#b").hide();
    $("#a").click(function(){$("#b").show();});
});

尝试使用 .hide（）

Answer 2

我迟到了，但我想分享我在这种情况下的经验。

在初始化所选元素之前隐藏元素没有问题。

我所做的是在初始化所选元素时应用width属性。

$("#yourSelect").chosen({ width: "100%" })

Ref.Doc "已选择"选择框的宽度。默认情况下，"选定"会尝试匹配要替换的选择框的宽度。如果在实例化 Selected 时您的选择处于隐藏状态，则必须指定宽度，否则所选内容将显示宽度为 0。

示例如下：

$( document ).ready(function() {
    //select element is initialised when it is hidden.
    $("#select1").chosen({ width: "100%" });
    
    $("#showBtn").on("click",function(){
      $("#wrapper").removeClass("hidden");
    })
});

.hidden{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="hidden" id="wrapper">
  <select id="select1">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>
<button id="showBtn">Show the select element</button>