Question

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

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

请查看页面加载前后的附图。 Attachment

Answer 1

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

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

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

更多信息here

$(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);
});

选择Multiselect下拉列表加载问题

2 个答案: