IE : HTML select 有大量选项需要大量时间加载

Question

我的要求是动态加载 HTML 下拉列表。

`

<html>
  <head>
    <script type="text/javascript">
        function addSelectBox()
        {
            var parentDiv = document.getElementById ("main");
            var selectElement = document.createElement ("select");
            for (var i=0;i < 6000;i++)
            {
                var option = new Option ("Option --- " + i, "Value" + i);
                selectElement.options[selectElement.options.length] = option;
            }
            parentDiv.appendChild (selectElement);
        }
    </script>
  </head>
  <body>
    <div id="main">
        <input type="button" onclick="addSelectBox()" 
         name="clickme" value="Add Select Box" />
    </div>
  </body>
</html>

`

在上面的代码中，单击按钮时，我正在创建带有选项的下拉菜单并将其添加到 div。

这在 Firefox 和 Chrome 中花费的时间非常少（2-5 秒）。但是当我在 Internet Explorer (11) 中运行它需要 20 多秒。
并且在加载时，页面被挂起，它也阻止了其他操作。

请找到 jsfiddle here

有没有其他办法，在IE下可以快点。
要么是否可以在后台加载它并显示加载消息。

Answer 1

如果您通过构建文本然后设置 innerHTML 来执行此操作，则几乎不需要任何时间。 Fiddle link.

var selectText = "<select>";
for (var i = 0; i < 6000; ++i)
    selectText += "<option value=" + i + ">Option " + i;
selectText += "</select>"
document.getElementById("main").innerHTML = selectText;

Answer 2

试试这个。快多了

fiddle

function addSelectBox(){
   var parentDiv = document.getElementById ("main");
   var selectElement = '<select>';
   for (var i=0;i < 6000;i++) {
     selectElement+= '<option value="'+i+'">---- ' + i+'</option>';
   }
   selectElement += '</select>';
   parentDiv.innerHTML+=selectElement;
}

Answer 3

它正在构建巨大的选项列表，然后追加这需要时间。 先将元素添加到父元素 div，然后再向其添加选项 :

function addSelectBox(){
   var parentDiv = document.getElementById ("main");
   var selectElement = document.createElement ("select");

   parentDiv.appendChild (selectElement); // ADD FIRST

   for (var i=0;i < 6000;i++)
   {
        var option = new Option ("Option ---- " + i, "Value" + i);

        selectElement.appendChild(option); // ADD OPTIONS TO IT
    }

}

IE : HTML select 有大量选项需要大量时间加载

IE : HTML select with huge options taking lot of time in loading

javascript

internet-explorer

html-select