JS select option 元素的大批量添加
2012-08-24 17:13
369 查看
欢迎技术交流。 QQ:138986722
最近项目需要这么一个很蛋疼的需求。
我都想知道、干嘛要添加这么数据到select里面去呢、疯了吗(测试数据1W多条)?
结果是老总说必须加、功能没实现是我们的问题、他们用不用得了、是他们的问题。
需求是这样的:
用户选择完毕还可以删除所选的选项:
一两百条、添加那是毛毛雨、分分钟搞定啊!
但是数据多了的时候就老火了、浏览器直接假死、白屏、下面是最初的添加方法:
页面按钮:
JS方法:
以下是几种优化方案:
第一种:
采用字符拼接方式、先把所有的option全部组装成字符串、然后在渲染页面:
第二种:
采用文档碎片(该方法不支持火狐——主要是innerText属性)
第三种:
该方案结合第二个方案、使用setTimeout用setTimeout,每500个,就setTimeout一下、让出cpu渲染浏览器、防止页面假死:
点击按钮过后你会看到数据慢慢的加进去......
这样过后、内容到是加载进去了、但是去选择删除的时候、同样蛋疼......
o(︶︿︶)o 唉!
不知不觉、又要下班了、回家ing。
最近项目需要这么一个很蛋疼的需求。
我都想知道、干嘛要添加这么数据到select里面去呢、疯了吗(测试数据1W多条)?
结果是老总说必须加、功能没实现是我们的问题、他们用不用得了、是他们的问题。
需求是这样的:
用户选择完毕还可以删除所选的选项:
一两百条、添加那是毛毛雨、分分钟搞定啊!
但是数据多了的时候就老火了、浏览器直接假死、白屏、下面是最初的添加方法:
页面按钮:
<select name="sm_careReceivers" id="sm_careReceivers" multiple="multiple" size="8" style="width: 355px; color: #006CAD;"> </select> <button type="button" onclick="returnSelectCustomerInfo();">确定</button>
JS方法:
var obj = $("#sm_careReceivers"); var count = $("#sm_careReceivers option").length; 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 == "") { obj.append("<option value='" + "佚名" + "/" + listValue + "/" + listTypeValue + "'>" + "佚名" + "/" + listValue + "/" + listTypeText + "</option>"); } else { obj.append("<option value='" + listText + "/" + listValue + "/" + listTypeValue + "'>" + listText + "/" + listValue + "/" + listTypeText + "</option>"); } } }
以下是几种优化方案:
第一种:
采用字符拼接方式、先把所有的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); }
点击按钮过后你会看到数据慢慢的加进去......
这样过后、内容到是加载进去了、但是去选择删除的时候、同样蛋疼......
o(︶︿︶)o 唉!
不知不觉、又要下班了、回家ing。
相关文章推荐
- JS select option 元素的大批量添加
- JS select option 元素的大批量添加
- IE下 JS添加Select元素的option问题
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- IE下 JS添加Select元素的option问题
- 使用js对select动态添加和删除OPTION
- js为select动态添加option,使用webservice提供数据
- JS动态添加与删除select中的Option对象(示例代码)
- js动态添加select标签元素的下来选项
- 原生JS给SELECT添加OPTION选项
- js添加,移除select 控件的option
- js对select动态添加和删除OPTION
- js对select动态添加和删除OPTION
- select元素添加option的add()方法 | try{}catch{}
- select中添加、修改、删除option元素
- 使用js对select动态添加和删除OPTION
- js 操作select和option,添加select列
- 为Html的select option元素添加图案
- 改进版:在select中添加、修改、删除option元素
- 使用JS和使用Jquery向select下添加option的区别