javascript - Chrome v51.0.2704.79 上引入的错误 m 无法清空大选择

标签 javascript html google-chrome

下面的代码

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" >

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 64; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}
function emptySelect(){
	$("#test").empty();	
}
$(function(){
	for ( i=0; i< 1e4; i++){
		$("#test").append("<option name='"+i+"'>"+makeid()+"</option>");
	}
});
</script>
</head>
<body>
<select id="test"></select><hr/>
<input type="button" value="empty select" onclick="emptySelect()">
</body>

(或在此处检查代码:http://jsbin.com/bowasuneje/edit?html,output)

适用于 Chrome 版本 50.0.2661.102 m(64 位)(我假设是以前的版本)。

但是从 51.0.2704.79 m(最新版本)开始,代码不再有效。 Chrome 崩溃

此代码在一个选择中插入 10 000 个选项元素。单击按钮时,选择应该被清空。这使用 JQuery,但使用如下代码:

mySelect = document.getElementById("test");
while ( mySelect.firstChild ){
    mySelect.removeChild( mySelect.firstChild );
}

也不行。

谁能重现这个问题?有什么好的解决方法吗?

谢谢,

本杰明

最佳答案

这很麻烦。在 Chrome 51.0.2704.79 m 中,只有 2,000 个选项元素时它就会崩溃。

如果您有那么多选项,选择元素可能不是最佳选择。但这不是 Chrome 崩溃的原因。

解决方法是在清空之前分离选择元素,然后将其添加回正文:

function emptySelect() {
  $("#test")
    .detach()
    .empty()
    .prependTo('body');
}

<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript">
    function makeid() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for (var i = 0; i < 64; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

      return text;
    }

    function emptySelect() {
      $("#test")
        .detach()
        .empty()
        .prependTo('body');
    }
    $(function() {
      for (i = 0; i < 1e4; i++) {
        $("#test").append("<option name='" + i + "'>" + makeid() + "</option>");
      }
    });
  </script>
</head>

<body>
  <select id="test"></select>
  <hr/>
  <input type="button" value="empty select" onclick="emptySelect()">
</body>

关于javascript - Chrome v51.0.2704.79 上引入的错误 m 无法清空大选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37619590/

相关文章:

javascript - Passport - Node.js 不返回刷新 token

javascript - 焦点在 Chrome 上的输入中不起作用

javascript - 我将此数据读入我的控制台。我想在我的网页中显示 "exampleHeader"和 "exampleBody"。我该怎么做呢?

javascript - 升级到 iOS 7 后,iOS 独立 Web 应用程序无法加载新内容

javascript - ReactJS - 完全相同的元素在 chrome 浏览器中放大/缩小时表现不同

google-chrome - Chrome 中的 Azure 无限重定向循环

php - Javascript 计时器不与 mysql_fetch_array 结果一起循环

javascript - 将鼠标悬停在链接文本上时加载图像(CSS + Javascript)

javascript - 如何引用另一个元素的数据属性?

jquery - offset() 在 Chrome 中为同一元素返回不同的值