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。