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。