鍍金池/ 問(wèn)答/HTML/ 下拉框傳值判斷導(dǎo)致頁(yè)面很卡 誰(shuí)能幫我看一下這個(gè)js判斷如何優(yōu)化

下拉框傳值判斷導(dǎo)致頁(yè)面很卡 誰(shuí)能幫我看一下這個(gè)js判斷如何優(yōu)化

圖片描述

這是代碼,主要就是將上面矩陣的第一行值傳到左邊下拉框,然后點(diǎn)擊選項(xiàng)后再把選中那一行下面的列在傳到 最右面的多選下拉里面,現(xiàn)在這個(gè)判斷在數(shù)據(jù)量大的時(shí)候非常的卡 ,哪位前輩可以幫助優(yōu)化一下.謝謝了

function ido(){

var text1 = $('#cselect').find("option:selected").text();
var text =$('#data_matrix').val();
var allcon = text.split("\n");
var firstrow = allcon[0].split("\t");
var tmpnum = '';
for (var m = 0; m < firstrow.length; m++) {
    if (firstrow[m] == text1) {
        tmpnum = m;
    }
}
var firstcol = new Array();
var k = 0;
for (var j = 0; j < allcon.length; j++) {
    var tmpstr = allcon[j].split("\t");
    var flag = $.inArray(tmpstr[tmpnum], firstcol);
    if (flag < 0 && $.trim(tmpstr[tmpnum]) != '') {
        firstcol[k] = tmpstr[tmpnum];
        k++;
    }
}
$('#s2example2').select2("val", "");
// $('#s2example2').empty();
for (var i = 0; i < firstcol.length; i++) {
    if (i != 0) {
        var term = $.trim(firstcol[i]);
        $('#s2example2').append("<option value='" + term + "'>" + term + "</option>");
    }
}

}### 問(wèn)題描述

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

回答
編輯回答
心悲涼

題主,請(qǐng)問(wèn)數(shù)據(jù)量多大,請(qǐng)不要在循環(huán)里操作dom,每次操作dom都會(huì)觸發(fā)瀏覽器重新渲染

var htmlStr = ""
for (var i = 0; i < firstcol.length; i++) {
    if (i != 0) {
        var term = $.trim(firstcol[i]);
        htmlStr += "<option value='" + term + "'>" + term + "</option>"
       
    }
}
 $('#s2example2').append(htmlStr);
2017年4月3日 03:19