select 大数据量append

//删除数组中第一个元素

array.shift();

• 第一种：

              采用字符拼接方式、先把所有的option全部组装成字符串、然后在渲染页面：

[javascript] view plain copy

1. var obj = $("#sm_careReceivers");  
2. var count = $("#sm_careReceivers option").length;  
3. var sHtmlTest = "";  
4. for(var o in json){   
5.     listText = json[o].name;  
6.     listValue = json[o].phone;  
7.     listTypeValue = json[o].cusid;   
8.     listTypeText = json[o].text;     
9.     flag = true;        
10.     //判断是否已存在                 
11.     for ( var i = 0; i < count; i++) {  
12.         if (obj.get(0).options[i].value == listText + "/"  
13.                 + listValue + "/" + listTypeValue) {  
14.             flag = false;  
15.             break;  
16.         }    
17.     }  
18.     //给控件赋值  
19.     if (flag) {  
20.         if (listText == "") {     
21.             sHtmlTest+="<option value='" + "佚名" + "/"  
22.                     + listValue + "/" + listTypeValue + "'>"  
23.                     + "佚名" + "/" + listValue + "/" + listTypeText  
24.                     + "</option>";  
25.         } else {  
26.             sHtmlTest+="<option value='" + listText + "/"  
27.                     + listValue + "/" + listTypeValue + "'>"  
28.                     + listText + "/" + listValue + "/" + listTypeText  
29.                     + "</option>";    
30.         }  
31.     }  
32. }  
33. obj.append(sHtmlTest);   

• 第二种：

             采用文档碎片(该方法不支持火狐——主要是innerText属性)

[javascript] view plain copy

1. var obj = $("#sm_careReceivers");  
2. var count = $("#sm_careReceivers option").length;  
3. var warp = document.createDocumentFragment();  
4. for(var o in json){   
5.     listText = json[o].name;  
6.     listValue = json[o].phone;  
7.     listTypeValue = json[o].cusid;   
8.     listTypeText = json[o].text;     
9.     flag = true;        
10.     //判断是否已存在                 
11.     for ( var i = 0; i < count; i++) {  
12.         if (obj.get(0).options[i].value == listText + "/"  
13.                 + listValue + "/" + listTypeValue) {  
14.             flag = false;  
15.             break;  
16.         }    
17.     }  
18.     //给控件赋值  
19.     if (flag) {  
20.         var objOption = document.createElement("OPTION");  
21.         objOption.value = listText + "/" + listValue + "/" + listTypeValue;  
22.         objOption.innerText = listText + "/" + listValue + "/" + listTypeText;  
23.         warp.appendChild(objOption);  
24.     }  
25. }  
26. obj.append(warp);  

• 第三种：

              该方案结合第二个方案、使用setTimeout用setTimeout,每500个,就setTimeout一下、让出cpu渲染浏览器、防止页面假死：

[javascript] view plain copy

1. var obj = $("#sm_careReceivers");  
2. var count = $("#sm_careReceivers option").length;  
3. var warp = document.createDocumentFragment();  
4. var number = 0;  
5. for(var o in json){   
6.     number++;  
7.     listText = json[o].name;  
8.     listValue = json[o].phone;  
9.     listTypeValue = json[o].cusid;   
10.     listTypeText = json[o].text;     
11.     flag = true;        
12.     //判断是否已存在                 
13.     for ( var i = 0; i < count; i++) {  
14.         if (obj.get(0).options[i].value == listText + "/"  
15.                 + listValue + "/" + listTypeValue) {  
16.             flag = false;  
17.             break;  
18.         }    
19.     }  
20.     //给控件赋值  
21.     if (flag) {  
22.         var objOption = document.createElement("OPTION");  
23.         objOption.value = listText + "/" + listValue + "/" + listTypeValue;  
24.         objOption.innerText = listText + "/" + listValue + "/" + listTypeText;  
25.         warp.appendChild(objOption);  
26.         if(number==500||o==(json.length-1)){  
27.             number = 0 ;  
28.             fooAddNewSelectTest(obj,warp);   
29.             warp = document.createDocumentFragment();     
30.         }  
31.     }  
32. }  

[javascript] view plain copy

1. function fooAddNewSelectTest(obj,warp){  
2.      window.setTimeout(function(){  
3.     obj.append(warp);   
4.      },1);  
5.  }  

点击按钮过后你会看到数据慢慢的加进去......

1. <script>  
2.     $(function(){  
3.         //append(),在父级最后追加一个子元素  
4.         $(".append").click(function(){  
5.             $("#wrap").append("<p class='three'>我是子元素append</p>");  
6.         });  
7.           
8.         //appendTo(),将子元素追加到父级的最后  
9.         $(".appendTo").click(function(){  
10.             $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));  
11.         });  
12.           
13.         //prepend(),在父级最前面追加一个子元素  
14.         $(".prepend").click(function(){  
15.             $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");  
16.         });  
17.           
18.         //prependTo(),将子元素追加到父级的最前面  
19.         $(".prependTo").click(function(){  
20.             $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));  
21.         });  
22.           
23.         //after(),在当前元素之后追加（是同级关系）  
24.         $(".after").click(function(){  
25.             $("#wrap").after("<p class='siblings'>我是同级元素after</p>");  
26.         });  
27.           
28.         //before(),在当前元素之前追加（是同级关系）  
29.         $(".before").click(function(){  
30.             $("#wrap").before("<p class='siblings'>我是同级元素before</p>");  
31.         });  
32.           
33.         //insertAfter(),将元素追加到指定对象的后面（是同级关系）  
34.         $(".insertAfter").click(function(){  
35.             $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));  
36.         });  
37.         //insertBefore(),将元素追加到指定对象的前面（是同级关系）  
38.         $(".insertBefore").click(function(){  
39.             $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));  
40.         });  
41.     });   
42.       
43.     //appendChild(),在节点的最后追加子元素  
44.     function appChild(){  
45.             // 创建p节点  
46.             var para=document.createElement("p");  
47.             // 创建文本节点  
48.             var node=document.createTextNode("我是子集appendChild新段落。");  
49.             // 把文本节点添加到p节点里  
50.             para.appendChild(node);  
51.                
52.             // 查找div1  
53.             var element=document.getElementById("wrap");  
54.             // 把p节点添加到div1里  
55.             element.appendChild(para);  
56.     }  
57. </script>