最近項目須要這麼一個很蛋疼的需求。
我都想知道、幹嗎要添加這麼數據到select裏面去呢、瘋了嗎(測試數據1W多條)?
結果是老總說必須加、功能沒實現是咱們的問題、他們用不用得了、是他們的問題。
需求是這樣的:json
用戶選擇完畢還能夠刪除所選的選項:瀏覽器
一兩百條、添加那是毛毛雨、分分鐘搞定啊!
可是數據多了的時候就老火了、瀏覽器直接假死、白屏、下面是最初的添加方法:
頁面按鈕:app
- <select name="sm_careReceivers" id="sm_careReceivers"
- multiple="multiple" size="8"
- style="width: 355px; color: #006CAD;">
- </select>
- <button type="button" onclick="returnSelectCustomerInfo();">肯定</button>
JS方法:ide
- 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渲染瀏覽器、防止頁面假死:spa
- 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。xml