//删除数组中第一个元素
array.shift();
采用字符拼接方式、先把所有的option全部组装成字符串、然后在渲染页面:
- var obj = $("#sm_careReceivers");
- var count = $("#sm_careReceivers option").length;
- var sHtmlTest = "";
- for(var o in json){
- listText = json[o].name;
- listValue = json[o].phone;
- listTypeValue = json[o].cusid;
- listTypeText = json[o].text;
- flag = true;
-
- for ( var i = 0; i < count; i++) {
- if (obj.get(0).options[i].value == listText + "/"
- + listValue + "/" + listTypeValue) {
- flag = false;
- break;
- }
- }
-
- if (flag) {
- if (listText == "") {
- sHtmlTest+="<option value='" + "佚名" + "/"
- + listValue + "/" + listTypeValue + "'>"
- + "佚名" + "/" + listValue + "/" + listTypeText
- + "</option>";
- } else {
- sHtmlTest+="<option value='" + listText + "/"
- + listValue + "/" + listTypeValue + "'>"
- + listText + "/" + listValue + "/" + listTypeText
- + "</option>";
- }
- }
- }
- obj.append(sHtmlTest);
采用文档碎片(该方法不支持火狐——主要是innerText属性)
- var obj = $("#sm_careReceivers");
- var count = $("#sm_careReceivers option").length;
- var warp = document.createDocumentFragment();
- for(var o in json){
- listText = json[o].name;
- listValue = json[o].phone;
- listTypeValue = json[o].cusid;
- listTypeText = json[o].text;
- flag = true;
-
- for ( var i = 0; i < count; i++) {
- if (obj.get(0).options[i].value == listText + "/"
- + listValue + "/" + listTypeValue) {
- flag = false;
- break;
- }
- }
-
- if (flag) {
- var objOption = document.createElement("OPTION");
- objOption.value = listText + "/" + listValue + "/" + listTypeValue;
- objOption.innerText = listText + "/" + listValue + "/" + listTypeText;
- warp.appendChild(objOption);
- }
- }
- obj.append(warp);
该方案结合第二个方案、使用setTimeout用setTimeout,每500个,就setTimeout一下、让出cpu渲染浏览器、防止页面假死:
- var obj = $("#sm_careReceivers");
- var count = $("#sm_careReceivers option").length;
- var warp = document.createDocumentFragment();
- var number = 0;
- for(var o in json){
- number++;
- listText = json[o].name;
- listValue = json[o].phone;
- listTypeValue = json[o].cusid;
- listTypeText = json[o].text;
- flag = true;
-
- for ( var i = 0; i < count; i++) {
- if (obj.get(0).options[i].value == listText + "/"
- + listValue + "/" + listTypeValue) {
- flag = false;
- break;
- }
- }
-
- if (flag) {
- var objOption = document.createElement("OPTION");
- objOption.value = listText + "/" + listValue + "/" + listTypeValue;
- objOption.innerText = listText + "/" + listValue + "/" + listTypeText;
- warp.appendChild(objOption);
- if(number==500||o==(json.length-1)){
- number = 0 ;
- fooAddNewSelectTest(obj,warp);
- warp = document.createDocumentFragment();
- }
- }
- }
- function fooAddNewSelectTest(obj,warp){
- window.setTimeout(function(){
- obj.append(warp);
- },1);
- }
点击按钮过后你会看到数据慢慢的加进去......
- <script>
- $(function(){
- //append(),在父级最后追加一个子元素
- $(".append").click(function(){
- $("#wrap").append("<p class='three'>我是子元素append</p>");
- });
-
- //appendTo(),将子元素追加到父级的最后
- $(".appendTo").click(function(){
- $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
- });
-
- //prepend(),在父级最前面追加一个子元素
- $(".prepend").click(function(){
- $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
- });
-
- //prependTo(),将子元素追加到父级的最前面
- $(".prependTo").click(function(){
- $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
- });
-
- //after(),在当前元素之后追加(是同级关系)
- $(".after").click(function(){
- $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
- });
-
- //before(),在当前元素之前追加(是同级关系)
- $(".before").click(function(){
- $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
- });
-
- //insertAfter(),将元素追加到指定对象的后面(是同级关系)
- $(".insertAfter").click(function(){
- $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
- });
- //insertBefore(),将元素追加到指定对象的前面(是同级关系)
- $(".insertBefore").click(function(){
- $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
- });
- });
-
- //appendChild(),在节点的最后追加子元素
- function appChild(){
- // 创建p节点
- var para=document.createElement("p");
- // 创建文本节点
- var node=document.createTextNode("我是子集appendChild新段落。");
- // 把文本节点添加到p节点里
- para.appendChild(node);
-
- // 查找div1
- var element=document.getElementById("wrap");
- // 把p节点添加到div1里
- element.appendChild(para);
- }
- </script>