html select优化,记一次HTML->select->option大量数据加载优化

1、问题：当左侧选项过多时，初始化加载缓慢、左右移动缓慢。

2、问题原因分析：

(1)、初始化加载过程原有实现，具体实现如下图

缓慢原因：频繁进行new Option()、add 操作;

selectOption = new Option(itemNames[i], itemNames[i], false, false);

selectOption.title = itemNames[i];

list.options.add(selectOption);

改进方法：遍历选项时，拼接字符串->拼接完成一次性添加到select内。

var myOptions="";

for (i = 0; i < j; i++) {

if(itemNames[i].endWith("_HA")){

continue;

}

myOptions+=''+itemNames[i]+'';

}

$("#"+list.id+"").append(myOptions);

(2)、移动选中项 缓慢，具体实现如下图

缓慢原因：逐个遍历获得选中项，在插入目标select时排序

j = e1.options.length;

for (i = 0; i < j; i++) {

var selectedFlag = e1.options[i].selected;

if (selectedFlag === true) {

insertOption(e1.options[i], e2);//排序

j--;

i--;

}

}

改进方法：

a:批量获得选中项；

b:借助(1)方案批量移动选中项；

c:取消选中项->选中项置空；

d:实际删除选中项；

其中步骤c给用户成功删除选中项感觉，d才是真正删除选中项。

具体代码如下：

var tmpE1=$('#'+e1.name+'');

var tmpE2=$('#'+e2.name+'');

var selectedOptions=tmpE1.find('option:selected');

var seletedLength=selectedOptions.length;// 选中

var i;

var myMovedOptions="";

for(i=0;i'+tmpValue+'';

myMovedOptions+=tmpOption;

}

// 添加到目标区域

tmpE2.append(myMovedOptions);

// 清空之前选中

selectedOptions.removeAttr("selected");

selectedOptions.text("");//伪删除

selectedOptions.remove();//实际删除