javascript - 使Jquery\Javascript更高效

我有以下代码片段可以即时生成选择列表。当检索到的记录在0-300条记录之间时，该代码可以正常工作。但是，当我尝试使用超过此数量的记录时，确切地是有671条记录，浏览器（IE，FF，Chrome，Opera）挂起，似乎javascript占用了大量资源，并且选择后浏览器变慢了等待5分钟后最终生成选项。
我正在寻找一种方法来提高效率，防止出现挂断现象，因为我将处理多达5000条记录

$("#idea_selectrel").on("change",function(){
       var attributeid = $("option:selected",this).val();
       $.post("/OCSRM/PopulateHTMLTablesServlet.do",{"attributeid":attributeid,"table":'idearelations'},function(data){
           if(!$.isEmptyObject(data))
           {
               $("#idea_selectrelvalue option:not(:first)").remove();
               var html='';
               var len = data.length;
               for(var i=0,len = data.length; i<len; i++ )
               {
                   var relvalue = [data[i].relvalue];
                   var description = [data[i].description];
                   html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
                   $("#idea_selectrelvalue").append(html).show();
               }
           }
           else
           {
               alert('No data found.');

           }


       },'json');
       //alert(attributeid);

    });

最佳答案

您的代码正在构建包含选项的HTML长字符串。它还将字符串一遍又一遍地附加到<select>元素。

将.append()移至循环后：

           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }
           $("#idea_selectrelvalue").append(html).show();