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

【问题标题】：Chosen Multiselect dropdownlist loading issue选择多选下拉列表加载问题
【发布时间】：2017-08-21 14:12:59
【问题描述】：

我正在为多选下拉列表使用“选择选择”。

我遇到了下拉列表的问题，最初在页面加载以放大形式显示的列表时（所有项目都是可见的，并且对所选库没有影响）一段时间，然后它恢复了下拉列表的所需感觉和形状。

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

【问题讨论】：

将display: none; 添加到多选并在文档加载时，使其再次可见。
请记住，对于 select 元素中的每个选项，都会使用 JQuery 将一个项目添加到 DOM 中。听起来选择元素在页面准备好之前显示。你在调用 .chosen() 之前是否使用了 $(document).ready() 函数？

标签： jquery html dropdown jquery-chosen

【解决方案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>

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

【讨论】：

在这个例子中如何进行多选？
@CaiqueRomero 再试一次
好！我排除了我的答案，我为你的答案投了赞成票。认识到它更合适。
@MasterYoda 感谢您的快速回复。我在 $(document).ready() 中的脚本。我正在使用 mvc 并且我的下拉列表是强类型的，这就是我的下拉列表在 document.ready 调用之前绑定。
@daredevil 在您选择的数据源中大约返回多少结果？请记住，对于每个返回的结果，选择必须在 DOM 中创建一个条目。这可能是实例化 Chosen 时发生延迟的地方。你可以测试这个减少你的数据集，如果它加载得更快，那就是你的问题。另外请添加包含脚本的顺序，JQuery 应该首先加载然后选择。然而，在一堆其他脚本之后选择的加载也会导致这个问题。我假设您在使用 MVC 时使用捆绑包？

【解决方案2】：

您可以在页面加载之前隐藏它吗？

CSS

#your-dropdown{
    display:none;
}

jQuery

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

【讨论】：