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

试试这个。快得多

fiddle

SQLiteDatabase db = this.openDatabase();
String query = "SELECT * FROM " + TABLE_SPECIES + " WHERE ";
for (int id : idList) {
    query += COL_ID + "=" + id + " OR ";
}
// I am aware this will end in an " OR" but this is not the point of this example so please ignore it.
Cursor cursorSpecies  = db.rawQuery(query, null);
// Use the cursor and close it.

While this should work decently well, a very large query would probably break some query string length limit so this is not ideal either.

Answer 2

如果您通过构建文本然后设置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 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选择包含大量选项需要花费大量时间加载

3 个答案: