选择多选下拉列表加载问题

Question

我正在使用'选择-选择'作为多选下拉列表。

我遇到了下拉列表的问题，最初在页面加载时以放大形式显示的列表(所有项目都可见，所选库没有效果(一段时间，然后它重新获得下拉列表的所需感觉和形状。

请找到页面加载前后的附加图像。 附件

Answer 1

您是否将脚本包装在$(document).ready()函数中？

这应确保在页面完全加载之前不会运行任何脚本。

.chosen()可能在页面首先加载初始元素之前正在运行。

更多信息在这里

$(document).ready(function()
{
//following code used to generate 2000 items in the select element
//in order to try and replicate the issue. 
var counter = 2000;
for( var i=1; i <= counter; i++ )
{
$(".chosen-select").append("<option> item " + i + "</option>");
}
//Initialise JQuery chosen library on select element 
$(".chosen-select").chosen();
});

<!-- Links to external resources and JQuery 2.1.1 !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<!-- HTML !-->
<select multiple class="chosen-select"></select>

---

此外，请确保在标记中引用所选库之前引用JQuery库。

Answer 2

您可以将其隐藏直到页面加载？

.CSS

#your-dropdown{
display:none;
}

jQuery

$(window).load(function() {
// When the page has loaded
$("#your_dropdown").fadeIn(1000);
});