JS select option 元素的大批量添加

最近项目需要这么一个很蛋疼的需求。

我都想知道、干嘛要添加这么数据到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,每50个,就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==50||o==(json.length-1)){
number = 0 ;
fooAddNewSelectTest(obj,warp);
warp = document.createDocumentFragment();
}
}
}
obj.append(warp);

这样过后、内容到是加载进去了、但是去选择删除的时候、同样蛋疼......

o(︶︿︶)o 唉！

不知不觉、又要下班了、回家ing。