Question

以下代码

<!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 崩溃

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

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

也不起作用。

任何人都可以重现这个问题吗？任何好的解决方法的想法？

谢谢，

本杰明

Answer 1

这令人不安。在Chrome 51.0.2704.79 m中，它只有2,000个选项元素崩溃。

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

解决方法是在清空之前分离select元素，然后将其添加回正文：

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>

在Chrome v51.0.2704.79 m上引入的Bug无法清空大选

1 个答案: