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

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

文章图片

【记一次HTML->select->option大量数据加载优化】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+=''; } $("#"+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(); //实际删除