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

Question

我使用“选择-选择”作为多选下拉列表。

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

请查找页面加载前后的附图。 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库。