IE:HTML选择与巨大的选项需要大量的时间加载

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

本文关键字：时间 加载 选项 选择 HTML 巨大 IE      更新时间：2023-09-26

我的要求是动态加载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

有其他方法吗，这样它在IE中可以很快。
或是否可以在后台加载并显示加载消息。

试试这个。更快的

小提琴

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;
}

如果通过构建文本然后设置innerHTML来完成此操作，则几乎不需要任何时间。Fiddle链接。

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

它正在构建庞大的选项列表，然后进行追加，这需要一些时间先将元素添加到父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
    }
}
相关文章：