2 
<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/

4

2 回答 2

9

是的，您可以尝试设置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()

于 2013-10-26T07:31:20.290 回答
0

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

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

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

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

参考。Doc 选择框的宽度。默认情况下，Chosen 会尝试匹配您要替换的选择框的宽度。如果在实例化 Chosen 时选择隐藏，则必须指定宽度，否则选择将以 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>

于 2021-05-11T07:46:11.980 回答